Vérificateur de contraste WCAG
Ratio de contraste WCAG 2.1 entre une couleur de premier plan et une couleur de fond, avec succès / échec sur les seuils d'accessibilité standard.
Texte d'exemplePortez ce vieux whisky au juge blond qui fume.
Ratio de contraste17.40:1
✓ AA GrandTexte 18pt+ ou 14pt+ en gras≥ 3.0:1
✓ AATexte courant sous 18pt≥ 4.5:1
✓ AAA GrandTexte grand, contraste renforcé≥ 4.5:1
✓ AAATexte courant, contraste renforcé≥ 7.0:1
Qu'est-ce qu'un ratio de contraste ?
Le ratio de contraste WCAG 2.x mesure la différence de luminance relative entre deux couleurs — en gros, à quel point l'une est plus claire que l'autre en tenant compte de la perception humaine de la luminosité sur les canaux RGB (le vert contribue le plus, le bleu le moins). Les ratios vont de 1:1 (identiques) à 21:1 (noir pur sur blanc pur).
Seuils WCAG
- 3:1 (AA Grand) — minimum pour texte 18pt ou plus, ou 14pt ou plus en gras.
- 4.5:1 (AA) — minimum pour le texte courant sous 18pt. Le seuil le plus cité.
- 7:1 (AAA) — contraste renforcé pour le texte courant. Aspirationnel ; requis uniquement pour les contextes gouvernementaux et de haute accessibilité.
Les composants d'UI et objets graphiques (icônes, bordures de formulaire) exigent un ratio minimum de 3:1 par rapport aux couleurs adjacentes selon WCAG 2.1 SC 1.4.11.