Vérificateur de contraste des couleurs

Ce qu'elle fait

Ce vérificateur mesure le contraste entre une couleur de texte et son fond avec la formule des règles d'accessibilité WCAG 2.2, reprise dans de nombreuses lois sur l'accessibilité. Il affiche le ratio de contraste, de 1:1 (aucun contraste) à 21:1 (noir sur blanc), et indique si la paire atteint les niveaux AA et AAA pour le texte normal, le grand texte et les composants d'interface comme les icônes et les bordures. Quand une paire échoue, il propose la couleur la plus proche, de même teinte, qui est conforme.

Comment l'utiliser

1. Saisissez ou choisissez la couleur du texte et la couleur de fond.
2. Lisez le ratio de contraste et les résultats AA et AAA, et vérifiez l'aperçu en direct.
3. En cas d'échec, appuyez sur Utiliser sous une couleur suggérée, puis copiez le lien pour partager le résultat.

Questions fréquentes

De quel ratio de contraste ai-je besoin ?
Le niveau AA, la cible légale habituelle, exige 4,5:1 pour le texte normal et 3:1 pour le grand texte ainsi que pour les icônes et les bordures d'interface. Le niveau AAA exige 7:1 pour le texte normal et 4,5:1 pour le grand texte.

Qu'est-ce qu'un grand texte ?
Un texte d'au moins 24 pixels CSS (18 points), ou d'au moins 18,7 pixels CSS environ (14 points) s'il est en gras. Les titres sont souvent grands ; le texte courant ne l'est généralement pas.

Pourquoi #777777 sur blanc échoue-t-il ?
Son ratio est de 4,47:1, juste en dessous des 4,5:1 requis pour le texte normal. Les ratios ne sont pas arrondis vers le haut : un gris légèrement plus foncé comme #767676 (4,54:1) est donc le gris le plus clair conforme sur blanc.

W3C — WCAG 2.2, 1.4.3 Contrast (Minimum)
W3C — WCAG 2.2, 1.4.11 Non-text Contrast