Qu'est-ce que le calculateur de ratio de contraste ?
Cet outil calcule le ratio de contraste entre une couleur de premier plan (le texte) et une couleur d'arrière-plan en s'appuyant sur la formule officielle des WCAG 2.x. Le ratio de contraste est un indicateur clé de l'accessibilité : il révèle si un texte restera lisible pour les personnes malvoyantes ou présentant un trouble de la perception des couleurs. Les valeurs s'échelonnent de 1:1 (couleurs identiques, texte invisible) à 21:1 (noir absolu sur blanc pur).
Comment l'utiliser
Saisissez les composantes rouge, verte et bleue (de 0 à 255) de votre couleur de premier plan (le texte) puis de votre couleur d'arrière-plan. Le calculateur linéarise chaque canal, calcule la luminance relative des deux couleurs, puis divise la plus claire par la plus sombre après avoir ajouté la constante de lumière ambiante de 0,05. Il indique enfin si le couple satisfait aux niveaux WCAG AA et AAA pour le texte normal et le grand texte.
La formule expliquée
Le ratio de contraste vaut \((L_1 + 0{,}05) / (L_2 + 0{,}05)\), où \(L_1\) désigne la luminance relative de la couleur la plus claire et \(L_2\) celle de la plus sombre. La luminance relative s'obtient en ramenant d'abord chaque canal à l'intervalle 0–1, puis en lui appliquant une correction gamma : si la valeur ainsi normalisée est ≤ 0,03928, on la divise par 12,92 ; sinon, on lui applique la transformation \(((c+0{,}055)/1{,}055)^{2{,}4}\). Les canaux linéarisés sont ensuite combinés selon \(0{,}2126\cdot R + 0{,}7152\cdot V + 0{,}0722\cdot B\), une pondération qui reflète la plus grande sensibilité de l'œil au vert.
$$\text{Contrast} = \frac{L_1 + 0.05}{L_2 + 0.05}$$$$\text{où}\quad \left\{ \begin{aligned} L_1 &= \max(L_{fg},\, L_{bg}) \\ L_2 &= \min(L_{fg},\, L_{bg}) \\ L_{fg} &= 0.2126\,\ell(\text{Fg R}) + 0.7152\,\ell(\text{Fg G}) + 0.0722\,\ell(\text{Fg B}) \\ L_{bg} &= 0.2126\,\ell(\text{Bg R}) + 0.7152\,\ell(\text{Bg G}) + 0.0722\,\ell(\text{Bg B}) \\ \ell(C) &= \begin{cases} \dfrac{C/255}{12.92} & C/255 \le 0.03928 \\[0.6em] \left(\dfrac{C/255 + 0.055}{1.055}\right)^{2.4} & \text{otherwise} \end{cases} \end{aligned} \right.$$
Exemple concret
Un texte noir (0,0,0) sur fond blanc (255,255,255) : la luminance du noir vaut 0, celle du blanc vaut 1. Le ratio est donc $$\frac{1 + 0{,}05}{0 + 0{,}05} = \frac{1{,}05}{0{,}05} = 21:1$$ — le contraste maximal possible, qui dépasse largement tous les niveaux WCAG.
Questions fréquentes
Quel ratio me faut-il ? Le niveau WCAG AA exige 4,5:1 pour le texte normal et 3:1 pour le grand texte (≥ 18 pt, ou 14 pt en gras). Le niveau AAA réclame 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 sombre. Intervertir le premier plan et l'arrière-plan donne donc exactement le même ratio.
Pourquoi ajouter 0,05 ? Cette constante modélise le reflet de la lumière ambiante sur l'écran, afin que même du noir pur sur du noir pur produise une valeur définie et non infinie.
