Qu'est-ce que le ratio de contraste des couleurs WCAG ?
Le ratio de contraste mesure à quel point deux couleurs se distinguent l'une de l'autre — le plus souvent un texte par rapport à son arrière-plan. Les Règles pour l'accessibilité des contenus Web (WCAG 2.x) s'appuient sur ce ratio pour fixer des seuils minimaux, afin que le contenu reste lisible pour les personnes malvoyantes ou ayant un trouble de la perception des couleurs. Les valeurs s'échelonnent de 1:1 (les deux couleurs sont identiques) jusqu'à 21:1 (noir pur sur blanc pur).
Comment utiliser ce calculateur
Saisissez la couleur du premier plan (le texte) et celle de l'arrière-plan sous forme hexadécimale, par exemple #1a73e8 ou la notation abrégée #fff. Le calculateur linéarise chaque couleur, calcule sa luminance relative, puis renvoie le ratio de contraste accompagné d'une indication de réussite ou d'échec face à chaque seuil WCAG.
La formule expliquée
Le ratio s'écrit (L1 + 0,05) / (L2 + 0,05), où L1 est la luminance relative de la couleur la plus claire et L2 celle de la plus foncée. La luminance relative se calcule en convertissant chaque canal sRGB en une valeur comprise entre 0 et 1, en le linéarisant (les canaux inférieurs ou égaux à 0,03928 sont divisés par 12,92 ; les canaux plus clairs utilisent ((c+0,055)/1,055)^2,4), puis en les combinant selon 0,2126·R + 0,7152·V + 0,0722·B. Les décalages de 0,05 évitent toute division par zéro et modélisent le reflet ambiant de l'écran.
$$\begin{gathered} \text{Ratio} = \frac{L_1 + 0.05}{L_2 + 0.05} \\[1.5em] \text{where}\quad \left\{ \begin{aligned} L_1 &= \max(L_{\text{Foreground}},\, L_{\text{Background}}) \\ L_2 &= \min(L_{\text{Foreground}},\, L_{\text{Background}}) \\ L &= 0.2126\,R_{lin} + 0.7152\,G_{lin} + 0.0722\,B_{lin} \\ c_{lin} &= \begin{cases} \dfrac{c}{12.92} & c \le 0.03928 \\[0.4em] \left(\dfrac{c+0.055}{1.055}\right)^{2.4} & c > 0.03928 \end{cases} \end{aligned} \right. \end{gathered}$$
Exemple concret
Texte noir (#000000) sur fond blanc (#FFFFFF) : le noir a une luminance de 0 et le blanc une luminance de 1. Le ratio vaut $$\frac{1 + 0.05}{0 + 0.05} = \frac{1.05}{0.05} = 21:1$$ — la valeur maximale possible, qui satisfait largement à tous les niveaux.
FAQ
De quel contraste ai-je besoin ? Le niveau WCAG AA exige 4,5:1 pour le texte normal et 3:1 pour le texte de grande taille (≥18 pt, ou 14 pt en gras). Le niveau AAA exige respectivement 7:1 et 4,5:1.
L'ordre des couleurs a-t-il une importance ? Non. La formule divise toujours la luminance la plus claire par la plus foncée : inverser le premier plan et l'arrière-plan donne donc le même ratio.
Pourquoi une simple luminosité ne suffit-elle pas ? La perception humaine des couleurs n'est pas linéaire et accorde plus de poids au vert. C'est pourquoi la luminance recourt à une correction gamma et à des coefficients propres à chaque canal, plutôt qu'à une simple moyenne.
