Contrast Checker : contraste des couleurs

Comment utiliser le Contrast Checker

Saisissez la couleur du texte dans le premier champ et celle du fond dans le second. Chaque champ accepte HEX (#5271FF), rgb(), hsl() et les 148 noms de couleur CSS, comme tomato. Le carré à côté ouvre le sélecteur du système, et le bouton du milieu échange texte et fond.

Le grand nombre est le rapport de contraste, de 1:1 (couleurs identiques) à 21:1 (noir sur blanc). Le tableau indique s’il passe l’AA et l’AAA pour chaque type d’élément, et l’aperçu applique la paire à un titre, un paragraphe et un bouton. Quand le texte n’atteint pas 4,5:1, le bouton d’ajustement assombrit ou éclaircit seulement le texte, en gardant la teinte, jusqu’à passer l’AA avec la plus petite modification possible.

Ce qu’est le rapport de contraste

Le rapport compare la luminance relative des deux couleurs, qui mesure la clarté perçue de chacune par l’œil. La formule de WCAG 2.2 est (L1 + 0,05) / (L2 + 0,05), où L1 est la luminance de la couleur la plus claire et L2 celle de la plus sombre. Le 0,05 évite la division par zéro et tient compte de la lumière ambiante qui se reflète sur l’écran.

La luminance vaut 0,2126 × R + 0,7152 × G + 0,0722 × B, chaque canal étant d’abord converti de sRGB en lumière linéaire. Cette conversion divise la valeur par 12,92 quand elle vaut au plus 0,04045 et, au-delà, utilise ((valeur + 0,055) / 1,055) ^ 2,4. Le vert pèse le plus, car l’œil y est plus sensible. WCAG 2.0 donnait 0,03928 au lieu de 0,04045, et l’écart ne change aucun résultat avec des canaux de 8 bits.

Le rapport n’est jamais arrondi à la hausse : 4,499 ne passe pas 4,5. Quand l’arrondi à deux décimales ferait afficher la valeur du seuil pour une combinaison en échec, la page tronque le nombre au lieu de l’arrondir.

AA et AAA : ce que chaque niveau exige

WCAG a deux niveaux de contraste pour le texte. L’AA, au critère 1.4.3, demande 4,5:1 pour le texte normal et 3:1 pour le grand texte, et c’est le niveau le plus visé. L’AAA, au critère 1.4.6, demande 7:1 et 4,5:1. Pour les composants d’interface et les graphiques, le critère 1.4.11 demande 3:1 en AA et n’a pas de version AAA.

Toutes les couleurs n’ont pas à atteindre l’AAA. Le W3C lui-même ne recommande pas d’exiger l’AAA comme règle générale pour un site entier, car certains contenus ne peuvent pas satisfaire tous les critères de ce niveau.

Ce qui compte comme grand texte

C’est un texte d’au moins 18 pt, ou d’au moins 14 pt en gras. En pixels CSS, à 96 dpi, cela fait environ 24 px et 18,66 px. Le seuil est plus bas parce que les grandes lettres restent lisibles avec moins de contraste. En cas de doute, traitez le texte comme normal : 4,5:1 convient à toutes les tailles.

Contraste des composants et icônes

Le critère 1.4.11 demande 3:1 pour les parties d’un composant nécessaires pour le reconnaître, comme la bordure d’un champ ou d’une case à cocher, et pour les graphiques porteurs d’information, comme les icônes sans texte et les lignes d’un graphique. Il couvre aussi les états, comme l’anneau de focus. Le texte à l’intérieur du composant suit toujours 4,5:1.

Erreurs courantes de contraste

Ces quatre cas reviennent souvent dans les audits d’accessibilité :

• Placeholder gris clair. C’est du texte et il faut 4,5:1 sur le fond du champ, même s’il disparaît quand la personne écrit.
• Texte sur une image. Le contraste change d’un point à l’autre : mesurez au pire endroit ou placez une couche pleine ou assombrie derrière le texte.
• Focus et états sans contraste. L’anneau de focus, la bordure du champ sélectionné et l’icône active relèvent du critère 1.4.11 et demandent 3:1.
• Composants désactivés. WCAG dispense les composants inactifs du contraste minimal, mais un gris trop pâle laisse la personne sans savoir ce qui est bloqué. Les logotypes sont aussi exclus de la règle, pas le texte autour.

Sources

Consultées le 6 novembre 2026 :

• WCAG 2.2, critère 1.4.3 : Contraste (minimum)
• WCAG 2.2, critère 1.4.6 : Contraste (amélioré)
• WCAG 2.2, critère 1.4.11 : Contraste non textuel
• WCAG 2.2 : définition de la luminance relative
• Understanding WCAG 2.2 : Contraste (minimum)

Aller au-delà du contraste

Besoin du code d’une couleur ? Utilisez le Color Picker, ou convertissez-la avec le convertisseur HEX en RGB et le convertisseur RGB en HEX. Pour voir le contraste du texte blanc et du noir sur chacune des 148 couleurs CSS, consultez le tableau des couleurs HTML.