Comment utiliser cette calculatrice
- Saisissez la couleur de premier plan (texte) sous forme de valeur hexadécimale.
- Saisissez la couleur d'arrière-plan située derrière.
- Consultez le ratio ainsi que les résultats de conformité AA et AAA pour le texte normal et le texte de grande taille.
- Vérifiez à nouveau toute combinaison de couleurs utilisée sur une image ou un dégradé au niveau de son point le plus clair.
Méthode de calcul
Chaque canal sRGB est converti en lumière linéaire, pondérée par la sensibilité de l'œil : 0,2126 pour le rouge, 0,7152 pour le vert, 0,0722 pour le bleu, afin d'obtenir la luminance relative. Le ratio est ensuite calculé selon la formule (L_plus_clair + 0,05) / (L_plus_sombre + 0,05), ce qui donne une valeur allant de 1:1 pour des couleurs identiques à 21:1 pour du noir sur fond blanc. Les décalages de 0,05 modélisent le reflet de la lumière ambiante sur l'écran.
Les règles WCAG 2.1 exigent un ratio d'au moins 4,5:1 pour le corps de texte normal et de 3:1 pour le texte de grande taille, défini comme étant du texte en gras de 18,66 px ou standard de 24 px, au niveau AA ; le niveau AAA porte ces exigences à 7:1 et 4,5:1. Les éléments autres que du texte, tels que les bordures de champs de saisie et les icônes, nécessitent un ratio de 3:1. La pondération du vert implique que deux couleurs de luminosité perçue similaire peuvent échouer largement même si elles semblent distinctes, ce qui explique pourquoi le gris pâle sur fond blanc est une cause d'échec si fréquente.
Formule et références
Ratio = (L₁ + 0,05) / (L₂ + 0,05), où L = 0,2126R + 0,7152G + 0,0722B sur les canaux sRGB linéarisés
Critères de succès WCAG 2.1 du W3C 1.4.3 (Contraste minimal) et 1.4.6 (Contraste amélioré).
Exemple de calcul
Corps de texte en #767676 sur un fond blanc #FFFFFF, et le même texte en #949494.
- Le blanc a une luminance relative de 1,0.
- La linéarisation de #767676 donne une luminance d'environ 0,1845, ce qui donne (1,05) / (0,2345) = 4,48.
- #949494 donne environ 0,2874, donc (1,05) / (0,3374) = 3,11.
#767676 à 4,48:1 échoue de peu au niveau AA pour le corps de texte ; #949494 à 3,11:1 échoue nettement et n'est validé que pour le texte de grande taille.
Questions fréquentes
Quel ratio dois-je respecter pour être conforme ?
4,5:1 pour le texte normal et 3:1 pour le texte de grande taille au niveau AA, passant à 7:1 et 4,5:1 au niveau AAA. Les composants d'interface et les graphiques informatifs nécessitent au moins 3:1.
Qu'est-ce qui est considéré comme du texte de grande taille ?
Au moins 24 px en style standard ou 18,66 px en gras, soit environ 18 pt et 14 pt en gras. En dessous, le seuil plus strict pour le texte normal s'applique.
Comment vérifier du texte affiché sur une image ?
Effectuez le test sur les zones les plus claires et les plus sombres où le texte peut apparaître ; si l'une d'elles échoue, appliquez un calque plein ou dégradé derrière le texte plutôt que de compter sur l'image seule.
Le respect du contraste rend-il mon site totalement accessible ?
Non, cela ne valide qu'un seul critère. La navigation au clavier, la visibilité du focus, les noms accessibles, la structure des titres et le fait de ne pas se fier uniquement à la couleur sont tout aussi essentiels.