Une explication complète de la formule de luminance relative, des seuils AA/AAA, et des conseils pratiques pour choisir des couleurs accessibles.
Le contraste de couleur est une mesure numérique de la façon dont un texte (premier plan) est « distinguable » de son arrière-plan. Les Web Content Accessibility Guidelines (WCAG) 2.x standardisent cette mesure afin que le texte reste lisible même pour les personnes avec une déficience visuelle, une perte de vision liée à l'âge, ou de mauvaises conditions d'éclairage. Le résultat est un nombre unique entre 1:1 (couleurs identiques, aucun contraste) et 21:1 (noir/blanc pur, contraste maximum).
Comment le contraste de couleur est-il calculé ? (la formule de luminance relative)
Réponse rapideD'abord, les canaux R, G, B de chaque couleur sont normalisés entre 0 et 1 et convertis en valeur linéaire avec correction gamma. Ces trois valeurs linéaires sont sommées avec les poids 0,2126×R + 0,7152×G + 0,0722×B pour obtenir la luminance relative (L). Le ratio de contraste est trouvé avec (L_plus_claire + 0,05) / (L_plus_sombre + 0,05).
- Étape 1 — normalisation sRGB : pour chaque canal c, c' = c/255.
- Étape 2 — correction gamma : si c' ≤ 0,03928, c_lin = c'/12,92 ; sinon c_lin = ((c'+0,055)/1,055)^2,4.
- Étape 3 — luminance relative : L = 0,2126·R_lin + 0,7152·G_lin + 0,0722·B_lin.
- Étape 4 — ratio : ajoutez 0,05 au L le plus élevé et au L le plus bas, puis divisez : (L1+0,05)/(L2+0,05), avec L1>L2.
Le canal vert a le poids le plus élevé (0,7152) car l'œil humain est le plus sensible au vert ; le canal bleu (0,0722) a le poids le plus bas. C'est pourquoi le rouge, le vert et le bleu purs à la même « luminosité » produisent des ratios de contraste différents.
Quelle est la différence entre l'accessibilité AA et AAA ?
Réponse rapideAA est le niveau minimum (et le plus couramment requis) de WCAG : le texte normal nécessite 4,5:1, le texte large et les composants d'interface nécessitent 3:1. AAA est le niveau renforcé : le texte normal nécessite 7:1, le texte large nécessite 4,5:1. AAA n'est pas toujours pratique pour tous les designs, mais il est préféré pour le contenu critique (par ex. informations de santé, formulaires officiels).
Résumé des seuils de contraste WCAG 2.x
| Type de contenu | AA (minimum) | AAA (renforcé) |
|---|
| Texte normal (moins de 14pt/18,66px, sauf gras) | 4,5:1 | 7:1 |
| Texte large (18pt/24px+ ou 14pt/18,66px+ gras) | 3:1 | 4,5:1 |
| Composant d'interface / limite d'objet graphique | 3:1 | non défini |
| Éléments décoratifs / désactivés | non requis | non requis |
Que signifie un ratio de contraste de 4,5:1 ?
Réponse rapide4,5:1 est le ratio minimum que WCAG AA exige pour le texte de taille normale. Par exemple, le gris moyen #767676 sur blanc (#FFFFFF) franchit tout juste cette barre à environ 4,54:1 — un exemple classique « limite » fréquemment cité dans la documentation WCAG. Un gris légèrement plus clair (par ex. #999) descend généralement sous 4,5:1 et échoue AA.
Comment choisir des couleurs accessibles ?
Réponse rapideVisez au moins AA (4,5:1 texte normal / 3:1 texte large) dans chaque paire texte/arrière-plan ; ne comptez pas uniquement sur la couleur pour le sens (par ex. ajoutez une icône ou du texte en gras à côté du rouge pour un message d'erreur) ; assombrissez ou éclaircissez la luminosité de votre couleur de marque pour augmenter le contraste ; et vérifiez les paires de couleurs qui pourraient être confondues, comme rouge-vert, avec une simulation de daltonisme.
Astuce pratique : la couleur principale d'une marque (par ex. violet #7c3aed) n'a généralement pas assez de contraste comme texte sur blanc, mais elle peut bien fonctionner comme arrière-plan avec du texte blanc — c'est pourquoi il est utile de tester la même couleur à la fois comme texte et comme arrière-plan.
Comment tester le contraste d'un site web ?
Réponse rapideSaisissez chaque paire texte/arrière-plan et bouton/icône de votre site dans l'outil ci-dessus et vérifiez le résultat AA/AAA ; pour comparer plusieurs couleurs de marque à la fois, utilisez l'onglet Vérification de palette — il montre chaque combinaison par paire de 4 couleurs dans un seul tableau.