Les résultats sont fournis à titre informatif uniquement et peuvent contenir des erreurs. Vérifiez les informations importantes de manière indépendante. L'utilisation de cet outil se fait à vos propres risques.
Ce que fait cet outil
Le vérificateur de contraste mesure la lisibilité d'un texte sur un fond. Choisissez une couleur de texte et une couleur de fond : il affiche le rapport de contraste, de 1:1 (couleurs identiques) à 21:1 (noir sur blanc), un aperçu en direct, et indique si la paire respecte les quatre seuils WCAG : AA et AAA pour le texte normal et pour le grand texte.
Le rapport repose sur la formule de luminance relative de WCAG 2 : chaque canal de couleur est linéarisé puis pondéré (le vert compte le plus, le bleu le moins), et la luminance la plus claire est divisée par la plus sombre, après ajout de 0,05 aux deux. Le niveau AA exige 4,5:1 pour le texte normal et 3:1 pour le grand texte (au moins 24px, ou 18,66px en gras). Le niveau AAA relève ces seuils à 7:1 et 4,5:1. Le calcul s'effectue dans votre navigateur.
Quand l'utiliser
- Choisir une couleur de marque pour des boutons et vérifier que des libellés blancs restent lisibles dessus.
- Corriger un audit d'accessibilité Lighthouse ou axe qui signale un texte trop peu contrasté.
- Choisir pour le texte secondaire un gris assez clair pour paraître secondaire mais qui passe le niveau AA.
- Concevoir un thème sombre, où les couleurs d'accent de ton moyen échouent souvent sur des fonds sombres.
Exemple concret
#ffffff sur #3b82f6
3.68:1 - AA large only
#767676 sur #ffffff
4.54:1 - AA normal and large, fails AAA normal
#1e293b sur #ffffff
14.63:1 - passes all four
Questions sur cet outil
Pourquoi un texte blanc sur un bouton bleu vif échoue-t-il ?
Les couleurs saturées de ton moyen ont une luminance assez élevée, si bien qu'un texte blanc posé dessus se situe souvent entre 3:1 et 4,5:1. Cela suffit pour de grands libellés en gras, mais pas pour du texte courant. Assombrissez le fond d'un ou deux crans jusqu'à atteindre 4,5:1.
Quel niveau viser, AA ou AAA ?
AA est le niveau auquel se réfèrent la plupart des lois et politiques d'accessibilité : considérez-le comme le minimum. AAA est un objectif plus strict qui vaut la peine d'être atteint pour les longs textes de lecture, mais il n'est pas exigé pour chaque élément.
Le contraste s'applique-t-il aussi aux icônes et aux bordures ?
WCAG 2.1 demande au moins 3:1 pour les éléments graphiques porteurs de sens et les composants d'interface, comme les bordures de champs, les indicateurs de focus et les icônes qui véhiculent une information. Pour ces éléments, fiez-vous au résultat AA pour le grand texte.
Puis-je vérifier une couleur écrite en RGB ou en HSL ?
Les sélecteurs fonctionnent avec des valeurs hexadécimales. Convertissez d'abord les autres notations avec les outils de la famille du Convertisseur de couleur HEX en RGB ou avec le Convertisseur de Couleurs, puis collez le code hex.
Cet outil est-il gratuit ?
Oui, il est gratuit. Sans inscription ni e-mail. Résultats directement sur cette page.
Comment obtenir mon résultat ?
Utilisez cet outil sur cette page. Le résultat apparaît ici, sans envoi par e-mail.