Vérification du contraste
Choisissez la couleur du texte et le fond, et le rapport de contraste est calculé et confronté aux WCAG.
Rapport de contraste
16,69:1
L’échelle va de 1:1 pour deux couleurs identiques jusqu’à 21:1 pour du noir sur blanc.
Voici à quoi cela ressemble
Titre en grand texte
Le texte courant à cette taille pose les exigences les plus hautes au contraste, parce que les lettres sont fines.
Exigences selon les WCAG
- Texte courant, AASous 18 points, ou sous 14 points en gras · 4,5:1Satisfait
- Texte courant, AAASous 18 points, ou sous 14 points en gras · 7:1Satisfait
- Grand texte, AAÀ partir de 18 points, ou 14 points en gras · 3:1Satisfait
- Grand texte, AAAÀ partir de 18 points, ou 14 points en gras · 4,5:1Satisfait
- Éléments d’interface et graphiques, AABords, icônes et autres éléments porteurs de sens · 3:1Satisfait
Comment ça marche
Le rapport de contraste mesure l’écart de luminance relative entre deux couleurs. Il va de 1:1 pour deux couleurs identiques jusqu’à 21:1 pour du noir sur blanc.
Les WCAG demandent pour le texte courant au moins 4,5:1 au niveau AA et 7:1 au niveau AAA. Pour le grand texte – à partir de 18 points, ou 14 points en gras – 3:1 et 4,5:1 suffisent.
Les éléments d’interface et les graphiques porteurs de sens ont besoin de 3:1 par rapport à ce qui les entoure. Cela vaut par exemple pour le bord d’un champ de saisie et pour les icônes sans texte à côté.
Le rapport se calcule à partir de la luminance des couleurs, non de leur apparente différence. Deux couleurs de même luminosité mais de teintes très différentes, par exemple le rouge (#ff0000) et le vert (#009400), obtiennent le rapport 1,00 et sont illisibles, même si elles paraissent différentes.
Les exigences sont un plancher, pas un but. Un texte exactement à 4,5:1 reste fatigant à lire au soleil ou sur un écran bon marché.
Comment l’outil calcule
Chaque canal est divisé par 255 puis linéarisé : les valeurs jusqu’à 0,04045 sont divisées par 12,92, et les valeurs v plus grandes deviennent ((v + 0,055) / 1,055) à la puissance 2,4. La luminance relative vaut 0,2126 R + 0,7152 V + 0,0722 B, et le rapport (L1 + 0,05) / (L2 + 0,05), L1 étant la luminance de la couleur la plus claire. Le seuil 0,04045 figure dans les WCAG depuis mai 2021 ; avant, c’était 0,03928, et le W3C précise que le changement n’a pas d’effet pratique. Pour les couleurs hexadécimales, il n’en a aucun, car aucune valeur de canal ne tombe entre les deux : 10/255 font 0,0392 et 11/255 font 0,0431.
Exemple détaillé
#767676 sur blanc : le canal 118/255 = 0,463 devient 0,181 une fois linéarisé, et comme les trois canaux sont égaux, la luminance vaut aussi 0,181. Le rapport est (1 + 0,05) / (0,181 + 0,05) = 4,54, ce qui satisfait le niveau AA pour le texte courant. Un pas plus clair, #777777 donne 4,478 et échoue. Le gris le plus clair qui atteint le niveau AAA, 7:1, sur blanc est #595959, à 7,0047 ; le pas suivant, #5a5a5a, donne 6,897.
Pas d’arrondi
L’explication du W3C sur le critère 1.4.3 dit que le rapport ne doit pas être arrondi : 4,499:1 n’atteint pas 4,5:1. L’outil juge sur la valeur non arrondie et tronque le chiffre affiché au lieu de l’arrondir. #0080aa sur blanc donne 4,4986 et échoue pour le texte courant. Arrondi, il afficherait 4,50 à côté d’un échec ; l’outil affiche donc 4,49:1, et #777777 4,47:1.
Dans le RGAA
Le référentiel général d’amélioration de l’accessibilité, publié par la DINUM, reprend ces seuils au critère 3.2 en pixels : 4,5:1 pour un texte de moins de 24 px, ou de moins de 18,5 px en gras, et 3:1 au-delà. Son glossaire donne encore l’ancien seuil 0,03928, ce qui ne change rien pour une couleur hexadécimale. Les WCAG avertissent aussi que les polices fines peuvent s’afficher plus pâles que leur couleur à cause de l’anticrénelage. L’outil ne traite que des couleurs hexadécimales pleines, sans transparence ni image de fond.