Un texte trop peu contrasté est l’un des problèmes d’accessibilité les plus fréquents sur le web. Le vérificateur de contraste de QodeCat calcule le rapport de contraste exact, au sens des WCAG 2.1, entre deux couleurs et indique les critères de succès respectés.
AA texte normal : au moins 4,5:1.
AA grand texte (24px, ou 18,66px en gras) : au moins 3:1.
AAA texte normal : au moins 7:1 ; AAA grand texte : au moins 4,5:1.
Composants d’interface et graphiques (icônes, bordures de champs, indicateurs de focus) : au moins 3:1.
Comment ça marche
La formule officielle
Chaque couleur est convertie en luminance relative à l’aide de la courbe sRGB définie par les WCAG. Le rapport vaut (couleur la plus claire + 0,05) divisé par (couleur la plus foncée + 0,05), soit une valeur comprise entre 1:1 (aucun contraste) et 21:1 (noir sur blanc). Les résultats ne sont jamais arrondis à la hausse : 4,48:1 ne passe donc pas le niveau AA.
Corrigez rapidement les couleurs non conformes
Lorsqu’une paire échoue au niveau AA, l’outil conserve votre teinte et votre saturation et trouve la couleur de texte, plus claire ou plus foncée, la plus proche qui passe. Appliquez-la en un clic, puis ajustez-la si besoin.
Questions fréquentes
Q. Quels formats de couleur puis-je saisir ?
Des codes hexadécimaux comme #333 ou #1a2b3c et des valeurs rgb() comme rgb(26, 43, 60). Vous pouvez aussi utiliser le sélecteur de couleur à côté de chaque champ.
Q. Qu’est-ce qu’un grand texte ?
Les WCAG considèrent comme grand un texte d’au moins 18 pt (24px) en graisse normale, ou 14 pt (environ 18,66px) en gras. Un grand texte n’a besoin que d’un rapport de 3:1 pour le niveau AA.
Q. Le niveau AA suffit-il ?
AA est le niveau exigé par la plupart des lois et politiques d’accessibilité ; en France, le RGAA s’appuie lui aussi sur le niveau AA des WCAG. Le niveau AAA est plus strict et recommandé pour les longs textes ou un public malvoyant.