À quoi sert cet outil
Le vérificateur calcule le ratio de contraste WCAG entre une couleur de texte et une couleur de fond, puis note la paire selon les quatre seuils WCAG 2.x : niveaux AA et AAA, chacun pour le texte normal et grand. Un aperçu en direct montre vos couleurs en vrai texte aux deux tailles.
La formule de luminance
D'abord, la luminance relative de chaque couleur est calculée : chaque canal RVB est linéarisé (les valeurs à 0,03928 ou en dessous sont divisées par 12,92 ; les plus grandes utilisent ((v + 0,055) / 1,055) ^ 2,4), puis combinés en L = 0,2126 x R + 0,7152 x V + 0,0722 x B. Les coefficients reflètent le fait que l'oeil humain est le plus sensible à la lumière verte.
Le ratio de contraste est (L1 + 0,05) / (L2 + 0,05), où L1 est la luminance de la couleur la plus claire. Il va de 1:1 (couleurs identiques) à 21:1 (noir sur blanc).
Exemple chiffré
Un texte blanc #FFFFFF sur fond bleu #3B82F6 donne un ratio d'environ 3,7:1. Cela réussit le AA pour le grand texte (il faut 3:1) mais échoue le AA pour le texte normal (il faut 4,5:1) : parfait pour un titre, pas pour du corps de texte.
Les quatre seuils
- AA texte normal : 4,5:1, la référence légale exigée par de nombreuses réglementations.
- AA grand texte : 3:1. Grand signifie au moins 18pt, ou 14pt en gras.
- AAA texte normal : 7:1, le niveau le plus strict.
- AAA grand texte : 4,5:1.
Limites
Le ratio ne mesure que le contraste de luminance. Il ne tient pas compte du rendu des polices, des traits fins, de la transparence sur des images, ni des différences de vision des couleurs au-delà de la luminance.