Vérificateur de contraste des couleurs : deux champs, un rapport
Saisissez la couleur du texte, puis celle du fond. Le rapport WCAG 2.x s’affiche à chaque frappe, avec cinq lignes de réussite ou d’échec. L’exemple préchargé, #777777 sur blanc, donne 4.47:1 et échoue au niveau AA pour le texte normal.
Les cinq seuils
AA exige 4,5 pour le texte normal et 3 pour le grand texte. AAA exige 7 et 4,5. La cinquième ligne, composants d’interface et graphiques, exige 3. Un texte est grand à partir de 18 pt (24 px), ou de 14 pt (18,67 px) en gras.
Couper, ne pas arrondir
Le rapport est tronqué après deux décimales. Il n’est pas arrondi. Un 4,496 s’affiche donc 4.49:1 et reste sous 4,5. Arrondi, il afficherait 4.50 et ferait passer un couple insuffisant. Dans l’exemple, la valeur réelle est environ 4,478 et vous lisez 4.47.
Utilisation pas à pas
- Saisissez la Couleur du texte ou choisissez-la avec le sélecteur. Champ et sélecteur restent synchronisés.
- Faites de même pour la Couleur de fond. Formats acceptés :
#rgb,#rrggbbetrgb(r, g, b). Un autre format affiche une erreur sous le champ. - Lisez le rapport et les lignes. Si AA échoue pour le texte normal, un encadré propose la couleur de texte la plus proche qui atteint 4,5:1.
- Cliquez sur Utiliser cette couleur pour l’appliquer, ou sur Inverser les couleurs pour tester un texte clair sur fond sombre.
Calcul de la couleur proposée, limites comprises
La teinte et la saturation restent identiques. Seule la luminosité change, par pas de 0,1 point de pourcentage, vers le plus sombre et vers le plus clair. Le résultat le plus proche est affiché : environ #767676 pour l’exemple. Les couleurs avec alpha (rgba(), hexadécimal à huit chiffres) sont refusées. Un texte sur une photo ou un dégradé n’a pas de fond unique : contrôlez vous-même le pire endroit. L’outil ne connaît pas la taille ni la graisse réelles de votre texte.
Vos couleurs restent dans la page
Le calcul se fait dans le navigateur. Aucune requête n’est envoyée et rien n’est enregistré. L’onglet Réseau des outils de développement permet de le vérifier.