Vérificateur de contraste & ratio de couleurs WCAG

Vérificateur de contraste WCAG & Ratio

Vérifiez instantanément les ratios de contraste WCAG 2.1 et APCA. Testez la conformité texte-fond aux normes AA/AAA et trouvez des ajustements de couleurs accessibles.

✨ Préréglages :
Configuration des couleurs
255, 255, 255
Opacité (Alpha)100%
H:0° S:0% L:100%
24, 24, 27
H:240° S:6% L:10%
Luminance : 0.0093
Moteur d'échelle typographique & graisse (WCAG 1.4.3)Texte standard (min. 4.5:1 AA)
Taille de police (px)16px
Pipeline d'exécution temps réel W3CCalcul standard O(1)
sRGBCouleurs sRGB d'entréeC^2.4Linéarisation gammaL1/L2Luminance relativeRatioMatrice de ratio W3CAAAÉvaluation de conformité
Moteur actif : Pipeline colorimétrique W3C 2.1Lum. texte : 1.0000 | Lum. fond : 0.0093
Ratio de contraste
17.72:1AAA CONFORME

Score perceptif APCA: Lc -106.7

1:14.5:17:121:1

aaNormal

Seuil requis : 4.5:1

CONFORME
Verdict de conformité17.72:1

aaLarge

Seuil requis : 3:1

CONFORME
Verdict de conformité17.72:1

aaaNormal

Seuil requis : 7:1

CONFORME
Verdict de conformité17.72:1

aaaLarge

Seuil requis : 4.5:1

CONFORME
Verdict de conformité17.72:1

uiComponents

Seuil requis : 3:1

CONFORME
Verdict de conformité17.72:1

apcaLc

Seuil requis : 60:1

CONFORME
Verdict de conformitéLc -106.7
Conformité aux spécifications W3C validéeAPCA Lc : -106.7 | Échelle : 16px (400)
Ratio de contraste
17.72:1
Statut légal WCAG
AAA CONFORME
Contraste perceptif (APCA)
Lc -106.7

Moteur mathématique W3C WCAG 2.1 & 2.2

Exécute l'expansion gamma sRGB exacte et le calcul de luminance relative selon les spécifications officielles W3C, sans aucune dérive d'arrondi.

Confidentialité totale & zéro transfert serveur

Toutes les transformations de couleurs, simulations de daltonisme et tokens de design sont traités localement dans votre navigateur sans aucune transmission réseau.

Normes APCA & dynamique perceptive

Comparez en direct les ratios WCAG historiques aux métriques perceptives APCA de nouvelle génération, intégrant fréquence spatiale et polarité du texte.

Référence technique et guide d'architecture

Testeur de Contraste WCAG & RGAA — Guide de référence

Vérifiez instantanément vos ratios de contraste WCAG 2.1 et RGAA. Analysez la lisibilité des textes et arrière-plans selon les critères AA/AAA et ajustez vos couleurs.

Testeur de Contraste WCAG & RGAA — Guide de référence — Architecture en mémoire côté client et flux de données
Testeur de Contraste WCAG & RGAA — Guide de référence — Architecture en mémoire côté client et flux de données

Paramètres clés et contrôles

Luminance relative (L)Flottant sRGB normalisé (0,000 à 1,000)

Luminosité relative d'un point dans l'espace colorimétrique, normalisée de 0,0 pour le noir absolu (#000000) à 1,0 pour le blanc pur (#FFFFFF) via l'expansion gamma sRGB CEI 61966-2-1 (C_linéaire = C <= 0,04045 ? C/12,92 : ((C+0,055)/1,055)^2,4) et les coefficients photométriques UIT-R BT.709 (L = 0,2126*R + 0,7152*G + 0,0722*B).

Par défaut : L1 = 1,000, L2 = 0,038
Ratio de contraste (CR)Rapport photométrique (1,00:1 à 21,00:1)

Calculé selon la formule (L1 + 0,05) / (L2 + 0,05) où L1 représente la luminance de la couleur la plus claire et L2 celle de la couleur la plus sombre. La constante 0,05 modélise la réflectance de la lumière ambiante sur la dalle de l'écran.

Par défaut : 4,50:1
Seuil de conformité WCAG AANorme légale obligatoire (RGAA / EN 301 549)

Exige un ratio minimal de 4,5:1 pour le corps de texte standard (< 18 pt normal ou < 14 pt gras) et de 3,0:1 pour les textes de grande taille (>= 18 pt / 24 px ou >= 14 pt / 18,66 px gras) ainsi que les composants d'interface interactifs.

Par défaut : 4,5:1 (Normal) / 3,0:1 (Grand)
Seuil de conformité WCAG AAANorme d'accessibilité renforcée

Exige un ratio renforcé de 7,0:1 pour le texte courant et de 4,5:1 pour les grands caractères, garantissant une lisibilité optimale pour les personnes malvoyantes ou en environnement à fort éblouissement.

Par défaut : 7,0:1 (Normal) / 4,5:1 (Grand)

Conseils de pro et bonnes pratiques

Constante de reflet ambiant de 0,05 et anticrénelage sous-pixel

L'équation de contraste du W3C ajoute +0,05 aux deux valeurs de luminance pour intégrer la réflexion diffuse ambiante sur l'écran. Comme les systèmes d'exploitation appliquent un lissage de police sous-pixel (ClearType ou CoreText), les graisses ultra-fines (font-weight 100 à 300) perdent en densité optique : une combinaison validant mathématiquement 4,5:1 échouera au niveau de la lisibilité perçue à moins d'utiliser une graisse minimale de 400.

Incapacité des canaux alpha semi-transparents à garantir la conformité

L'utilisation de valeurs CSS rgba() ou hexadécimales avec canal alpha engendre un contraste dynamique variable selon les calques d'arrière-plan sous-jacents. Le standard WCAG 2.1 impose d'évaluer le contraste sur le pixel composé le plus défavorable. Procédez systématiquement au mélange alpha sur le fond opaque (C_out = C_fg * alpha + C_bg * (1 - alpha)) avant de certifier la conformité.

Disparité de polarité entre APCA et WCAG 2.1

La norme WCAG 2.1 traite le contraste de manière symétrique (le noir sur blanc obtient le même ratio de 21:1 que le blanc sur noir). Or, le système visuel humain perçoit le texte sombre sur fond clair (polarité positive) avec une acuité nettement supérieure grâce à la constriction pupillaire et à la réduction de halo. L'algorithme APCA attribue des scores Lc asymétriques : une même paire de couleurs peut être conforme en mode clair mais nécessiter un écart de luminance accru en mode sombre.

Pièges courants et dépannage

⚠️La couleur principale de ma charte graphique obtient 4,1:1 sur fond blanc, échouant de peu au niveau WCAG AA pour le texte standard.

Plutôt que de bouleverser l'identité visuelle de votre marque, réservez cette teinte à 4,1:1 aux titres de grande taille (>= 24 px ou >= 18,66 px gras) ou aux arrière-plans d'éléments interactifs où le seuil de 3,0:1 s'applique. Pour le texte courant en 16 px, utilisez la fonction d'ajustement automatique de l'outil pour assombrir la teinte vers 4,54:1 en réduisant la luminosité HSL tout en préservant la teinte et la saturation d'origine.

⚠️Les états de survol ou les boutons désactivés deviennent illisibles ou sont rejetés lors des audits d'accessibilité.

Selon le critère de succès WCAG 2.1 1.4.11 (Contraste des éléments non textuels), les contours d'éléments interactifs actifs doivent conserver un contraste minimal de 3,0:1 avec l'arrière-plan adjacent. Même si les composants inactifs désactivés en sont formellement exemptés, les bonnes pratiques UX et RGAA recommandent d'associer ces états à l'attribut aria-disabled='true' et à des infobulles explicatives, plutôt que de laisser chuter le contraste sous 2,5:1.

Foire aux questions (FAQ)

Comment calcule-t-on le ratio de contraste des couleurs selon les normes WCAG ?▼

Le ratio de contraste WCAG 2.1 se calcule selon la formule (L1 + 0,05) / (L2 + 0,05), où L1 est la luminance relative de la couleur la plus claire et L2 celle de la couleur la plus sombre. La luminance s'obtient en convertissant les canaux sRGB 8 bits (0 à 255) en lumière linéaire : si C / 255 <= 0,04045, C_linéaire = (C / 255) / 12,92 ; sinon, C_linéaire = (((C / 255) + 0,055) / 1,055)^2,4. Ces composantes sont ensuite pondérées : L = 0,2126*R + 0,7152*G + 0,0722*B. Le ratio résultant s'échelonne de 1:1 (couleurs identiques) à 21:1 (noir pur #000000 sur blanc pur #FFFFFF).

Quelle est la différence entre les exigences de contraste WCAG niveaux AA et AAA ?▼

Le niveau WCAG AA constitue la référence légale requise par le RGAA en France, la norme européenne EN 301 549 et la directive européenne sur l'accessibilité web. Il impose un ratio minimal de 4,5:1 pour le texte normal (< 18 pt / 24 px standard, ou < 14 pt / 18,66 px gras) et de 3,0:1 pour les grands textes et éléments d'interface essentiels. Le niveau AAA est un palier d'accessibilité renforcé destiné aux déficiences visuelles sévères, exigeant 7,0:1 pour le texte normal et 4,5:1 pour les grands caractères. La plupart des design systems d'entreprise visent le niveau AA globalement et réservent le niveau AAA aux mentions critiques (médical, mentions légales, services publics).

Quelle taille de police est considérée comme un grand texte au sens du WCAG ?▼

Selon les directives WCAG 2.1 et RGAA, un 'grand texte' est formellement défini comme un texte d'au moins 18 points (soit environ 24 pixels CSS à une résolution standard de 96 DPI) ou d'au moins 14 points en gras (soit environ 18,66 pixels CSS avec une graisse de 700 ou supérieure). Les textes de grande taille ne requièrent qu'un ratio de 3,0:1 pour satisfaire au niveau AA (et 4,5:1 pour le niveau AAA), car le tracé élargi des glyphes offre une surface optique plus importante sur la rétine humaine.

Pourquoi les textes d'espace réservé (placeholders) et les boutons désactivés échouent-ils souvent aux tests ?▼

Le texte de substitution par défaut des navigateurs (souvent #767676 sur blanc) oscille autour de 4,5:1, mais de nombreuses bibliothèques d'interface réduisent son opacité à 0,4 ou 0,5, faisant chuter le contraste à environ 2,2:1. Si le critère WCAG 1.4.3 exempte les composants inactifs (comme les boutons désactivés), les textes indicatifs de formulaires ne sont PAS exemptés s'ils contiennent des instructions nécessaires à la saisie. Remplacer les placeholders éphémères par des libellés flottants persistants garantit la conformité à 4,5:1 sans pénaliser la lisibilité.

Quelle est la différence entre l'algorithme WCAG 2.1 et le calcul APCA de WCAG 3.0 ?▼

Le standard WCAG 2.1 applique un ratio mathématique statique (de 1:1 à 21:1) basé uniquement sur la luminance relative, sans tenir compte de la fréquence spatiale (graisse et épaisseur du trait) ni de la polarité (texte clair sur fond sombre versus sombre sur clair). L'algorithme APCA (Accessible Perceptual Contrast Algorithm), conçu pour la future version WCAG 3.0, calcule une valeur de contraste perceptuel signée (Lc de 0 à 108+) fondée sur la réponse des photorécepteurs rétiniens et le traitement cortical. Avec APCA, les polices fines requièrent un indice Lc bien plus élevé que les polices grasses, et le mode sombre nécessite des deltas de luminance plus prononcés pour égaler la lisibilité du mode clair.

Outils et utilitaires connexes

Tous les outils →
Calculateur Papier Peint & RouleauxDesign

Calculez le nombre de rouleaux de papier peint, la surface en m² et les chutes selon les raccords de motif, les déductions d'ouvertures et le format des rouleaux.

Ouvrir l'outil→
Générateur d'Ombres CSS & Ombres DoucesDesign

Générez des ombres portées CSS multicouches et une élévation fluide réaliste. Ajustez le décalage, le flou, la diffusion, le biseau intérieur et exportez des tokens d'ombre CSS ou Tailwind.

Ouvrir l'outil→
Générateur CSS Clip-Path & FormesDesign

Générez des formes polygonales CSS clip-path avec poignées interactives. Copiez le code CSS multi-navigateurs, les masques SVG et les coordonnées réactives en pourcentages.

Ouvrir l'outil→
Extracteur de palette d'image & nuancierDesign

Extrayez instantanément les palettes de couleurs de vos images. Générez des nuanciers dominants en HEX, RGB et HSL, exportez vos tokens CSS ou Tailwind et testez le contraste d'accessibilité WCAG.

Ouvrir l'outil→
Calculateur Nombre d'Or & Rectangle d'OrDesign

Calculez instantanément les dimensions du nombre d'or et les proportions du rectangle d'or. Divisez les longueurs par phi (1,618), adaptez la typographie et générez des grilles réactives.

Ouvrir l'outil→
Générateur Neumorphisme CSS & Soft UIDesign

Générez des ombres portées CSS en neumorphisme et soft UI avec surfaces extrudées, en creux, plates ou concaves. Copiez instantanément du code CSS, Tailwind, SCSS ou SVG.

Ouvrir l'outil→