À propos Contraste WCAG
Rapport et niveau AA/AAA
Utilisation
Saisissez deux couleurs pour voir leur ratio de contraste WCAG et un verdict AA ou AAA immédiat pour le texte et l’interface.
Contraste WCAG
Normes de contraste WCAG
WCAG AA exige au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte. AAA porte ces seuils à 7:1 et 4,5:1.
Le grand texte correspond à 18pt normal ou 14pt gras et plus. Les icônes et indicateurs de focus doivent aussi atteindre 3:1.
Vérifier et corriger
Saisissez les couleurs de texte et de fond, ou utilisez les curseurs pour changer la luminosité en conservant teinte et saturation.
Le panneau de suggestions propose des couleurs proches atteignant AA. Vérifiez-les ensuite sur votre vrai fond.
Questions fréquentes
Quelle différence entre AA et AAA ?
AA est le niveau de base, AAA est plus strict. AAA convient aux longs textes, AA aux interfaces produit.
Qu’est-ce qu’un grand texte ?
18pt (24px) ou 14pt (18,66px) gras et plus. Il autorise un ratio plus faible.
Pourquoi le ratio diffère-t-il dans le navigateur ?
Le navigateur peut appliquer opacité, calques ou images de fond. Mesurez les couleurs réellement rendues.
Ces couleurs sont-elles utilisables en production ?
Oui, ce sont des HEX ordinaires. Vérifiez-les dans le contexte, y compris les états hover et désactivés.