Valider une maquette web
Vérifier les paires texte et fond avant le développement évite de refaire la palette plus tard.
Vérificateur de contraste
Vérifiez si deux couleurs respectent le contraste WCAG.
🔒 Ce fichier est traité dans votre navigateur. Il n'est jamais envoyé à un serveur.
…
À quoi ça sert
Le contraste entre un texte et son fond détermine s’il se lit confortablement. Il se mesure comme un rapport numérique entre les luminances des deux couleurs, de 1:1 quand elles sont identiques jusqu’à 21:1 pour du noir pur sur blanc pur.
Les normes WCAG, référence internationale de l’accessibilité web, fixent les seuils. Pour un texte de taille normale, 4.5:1 est le minimum du niveau AA, celui qui est habituellement exigé et que reprend la législation d’accessibilité de nombreux pays pour les sites publics. Le niveau AAA, plus strict, demande 7:1.
Ce n’est pas qu’une question de conformité. Le gris clair sur blanc si élégant sur l’écran du graphiste devient illisible au soleil, sur un téléphone en basse luminosité, ou pour toute personne à la vue fatiguée, bien plus nombreuse qu’on ne le suppose.
Comment ça marche
- Indiquez la couleur du texte et celle de l’arrière-plan à vérifier.
- L’outil calcule instantanément le rapport de contraste entre les deux.
- Vérifiez si le résultat atteint les niveaux AA et AAA des normes d’accessibilité WCAG.
Quand l'utiliser
Respecter la réglementation
Les sites publics et de nombreux marchés exigent le niveau AA. La vérification en atteste.
Texte sur image
Un titre posé sur une photo doit être vérifié contre la zone la plus claire de cette photo.
Conseils pratiques
- Le texte grand et gras bénéficie d’un seuil plus souple, 3:1, mais mieux vaut ne pas s’en contenter si on peut faire mieux.
- Les textes secondaires en gris sont l’erreur la plus fréquente : ils passent souvent sous 4.5:1 sans que personne ne le remarque.
- Vérifiez aussi les états des liens et des boutons, pas seulement le texte courant.
- Si une paire n’atteint pas le minimum, il suffit généralement d’assombrir le texte plutôt que de changer le fond.
Questions fréquentes
Quel rapport faut-il atteindre pour être accessible ?
Pour du texte courant, un minimum de 4.5:1 satisfait le niveau AA (le standard usuel) et 7:1 satisfait le niveau AAA, plus exigeant.
Pourquoi le contraste des couleurs est-il important ?
Un contraste faible gêne la lecture des personnes malvoyantes et rend votre site moins accessible et plus pénible pour tout le monde, surtout en extérieur ou sur un écran de mauvaise qualité.