Mode d’emploi
- Saisissez la couleur du texte (premier plan) et celle de l’arrière-plan au format HEX, rgb(), hsl() ou dans un autre format CSS, ou utilisez les sélecteurs de couleur.
- Consultez le rapport de contraste et le résultat de conformité pour chaque exigence WCAG.
- Si une exigence n’est pas respectée, choisissez un objectif et appliquez la couleur suggérée, qui conserve la teinte et ne modifie que la luminosité.
- Utilisez « Inverser » pour vérifier la combinaison inverse, par exemple un texte clair sur un bouton sombre.
Fonctionnement
Le ratio suit la définition de WCAG 2.2 : la luminance relative de chaque couleur est calculée à partir de ses canaux sRGB, et le ratio est égal à (la plus claire + 0.05) ÷ (la plus sombre + 0.05). Il va de 1:1 (couleurs identiques) à 21:1 (noir sur blanc).
Critères vérifiés : le critère de succès 1.4.3 (AA) exige un ratio de 4.5:1 pour le texte normal et de 3:1 pour le grand texte ; le critère 1.4.6 (AAA) exige respectivement 7:1 et 4.5:1 ; le critère 1.4.11 exige 3:1 pour les éléments d’interface et les éléments graphiques porteurs de sens, comme les bordures de champs et les icônes. Le grand texte correspond à une taille d’au moins 24px en graisse normale ou d’environ 18.66px en gras. WCAG n’autorise pas l’arrondi à la valeur supérieure : un ratio de 4.49:1 échoue donc au niveau AA, même s’il s’en approche ; le ratio affiché ici est tronqué, et non arrondi.
La suggestion conserve la teinte et la chroma du texte en OKLCH, puis recherche la valeur de luminosité la plus proche, plus sombre ou plus claire, qui atteint le seuil. Le contraste n’est qu’un des facteurs de lisibilité : la graisse et la taille de la police, ainsi que les différences de perception des couleurs, comptent aussi. WCAG 2.2 est la recommandation actuelle du W3C à laquelle se réfèrent la plupart des lois sur l’accessibilité.
Exemples
Texte gris presque conforme
Le gris #777777 sur fond blanc donne un ratio de 4.48:1. Il satisfait les exigences pour le grand texte et les composants d’interface, mais échoue au niveau AA pour le texte normal. Le gris le plus proche qui satisfait aux exigences est environ #767676, avec un ratio de 4.54:1.
Texte blanc sur un bouton aux couleurs de la marque
Le blanc sur #ff8800 donne un ratio d’environ 2.4:1, insuffisant même pour le niveau 3:1 du grand texte. Les solutions habituelles consistent à assombrir l’orange ou à utiliser un texte sombre ; la suggestion indique à quel point la couleur du texte doit être assombrie.
Vérifier la bordure d’un champ de formulaire
Une bordure gris clair #cccccc sur fond blanc donne un ratio d’environ 1.6:1. Selon le critère 1.4.11, la bordure qui délimite un champ de saisie doit atteindre 3:1 ; il faut donc une couleur proche de #949494 ou plus sombre.
Foire aux questions
Quel ratio de contraste faut-il pour atteindre le niveau AA de WCAG ?
4.5:1 pour le texte courant, 3:1 pour le grand texte (24px ou 18.66px en gras) et 3:1 pour les composants d’interface et les éléments graphiques porteurs de sens. Le niveau AAA exige un ratio de 7:1 pour le texte et de 4.5:1 pour le grand texte.
Le texte des logos ou des boutons désactivés doit-il satisfaire aux exigences ?
Non. WCAG exempte le texte des logos et des noms de marque, le texte purement décoratif et celui des composants d’interface inactifs (désactivés).
Pourquoi mon résultat diffère-t-il légèrement de celui d’un autre vérificateur ?
Certains outils arrondissent le ratio à une décimale ou à la valeur supérieure. WCAG compare la valeur exacte ; cet outil tronque donc le résultat à deux décimales. De petits écarts peuvent aussi venir des couleurs saisies avec un canal alpha.
Qu’en est-il de la nouvelle méthode de contraste APCA ?
APCA est une méthode différente, proposée pour une future version des WCAG. Elle ne fait pas partie des WCAG 2.2, que cet outil évalue et auxquelles se réfèrent les règles d’accessibilité actuelles.
Confidentialité
Les couleurs sont vérifiées dans votre navigateur. Aucune donnée n’est envoyée ni stockée.