Vérificateur de contraste des couleurs (WCAG)
Vérifiez le rapport de contraste entre une couleur de texte et une couleur de fond selon WCAG 2.2 AA et AAA pour le texte normal, le texte agrandi et les éléments d’interface, et obtenez les couleurs conformes les plus proches
Chargement de l’outil…
Choisissez une couleur de texte et une couleur de fond pour obtenir en même temps le rapport de contraste des WCAG 2.2 et les résultats AA et AAA. Quand un niveau n’est pas atteint, la page propose la couleur conforme la plus proche en ne changeant que la luminosité. Utile pour vérifier que le texte d’un site, d’une application ou d’une présentation reste lisible.
Mode d’emploi
- Dans « Vérifier deux couleurs », réglez la « Couleur du texte » et la « Couleur de fond » avec le sélecteur ou en saisissant HEX, rgb() ou hsl().
- Saisissez votre propre texte dans « Phrase d’aperçu » pour le voir en texte normal, agrandi et en gras, ainsi qu’en bordure et en icône.
- Sous « Couleurs conformes les plus proches », appuyez sur « Appliquer » à côté de « Changer la couleur du texte » ou « Changer le fond ». Appuyez sur une valeur HEX pour la copier.
- Dans « Vérifier une palette », saisissez de 2 à 12 couleurs pour obtenir un tableau de toutes les combinaisons et la liste « Paires qui atteignent le niveau ».
Fonctionnement
- Rapport de contraste = (L1 + 0.05) ÷ (L2 + 0.05), où L1 et L2 sont les luminances relatives des deux couleurs. Il va de 1:1 à 21:1 et est arrondi à l’inférieur à deux décimales.
- Les niveaux suivent les critères 1.4.3 (AA : 4.5:1 pour le texte normal, 3:1 pour le texte agrandi), 1.4.6 (AAA : 7:1 et 4.5:1) et 1.4.11 (3:1 pour les éléments d’interface) des WCAG 2.2. Le texte agrandi fait 24px, ou 18.66px en gras, ou plus.
- Une suggestion conserve la teinte et la chroma en OKLCH et ne déplace que la luminosité jusqu’à atteindre le niveau. Quand aucune luminosité ne permet de l’atteindre, la page l’indique.
- Les dernières couleurs, la phrase et la liste de la palette restent dans ce navigateur.
Questions fréquentes
- Que signifie un rapport de contraste de 4.5:1 ?
- La luminance relative de la couleur la plus claire plus 0.05 vaut 4.5 fois celle de la couleur la plus sombre plus 0.05. C’est le minimum pour du texte de taille normale au niveau AA.
- Le texte gris #777777 est-il conforme sur fond blanc ?
- Son rapport est de 4.47:1, juste sous 4.5:1, donc seul le niveau du texte agrandi est atteint. Un cran plus sombre, #767676, donne 4.54:1 et atteint AA.
- Quelle est la différence entre AA et AAA ?
- AA demande 4.5:1 pour le texte normal, AAA demande 7:1. La plupart des sites visent AA ; AAA convient aux longs textes de lecture.
- Les bordures de boutons et les icônes ont-elles aussi besoin de contraste ?
- Oui. Selon le critère 1.4.11 des WCAG, les éléments d’interface et les graphiques porteurs de sens doivent présenter au moins 3:1 par rapport à leur entourage ; la ligne « Éléments d’interface et graphiques » vérifie ce point.