Contrast Checker : vérifier le contraste des couleurs selon la norme WCAG

Le Contrast Checker est gratuit et utilisable sans inscription. Le rapport de contraste est calculé directement dans ton navigateur ; tes couleurs ne sont pas envoyées à un serveur.

Selon la formule WCAG 2.x, l’outil calcule d’abord la luminance relative (L) des deux couleurs, puis divise L de la couleur la plus claire plus 0.05 par L de la couleur la plus foncée plus 0.05. Le résultat se situe entre 1:1 (couleurs identiques) et 21:1 (noir sur blanc) ; l’ordre des couleurs ne change rien. Plus la valeur est élevée, plus le texte est facile à lire sur l’arrière-plan.

Pour le niveau AA, le texte normal nécessite un contraste d’au moins 4.5:1 et le grand texte, de 3:1. Le niveau AAA, plus strict, exige 7:1 pour le texte normal et 4.5:1 pour le grand texte. Les éléments d’interface et les graphiques, comme les bordures de champs ou les icônes, nécessitent 3:1. La plupart des obligations légales se réfèrent au niveau AA ; AAA est un niveau plus strict et facultatif.

Un texte est considéré comme grand à partir de 18 pt (24 px), ou de 14 pt (18.66 px) s’il est aussi en gras. Le contraste minimal requis pour les grands textes est plus faible (3:1 au lieu de 4.5:1 pour AA), car ils restent lisibles avec un contraste moindre.

Valeurs hexadécimales avec ou sans #, sur trois ou six caractères (#fff ou #ffffff), formats rgb() et rgba(), ainsi que valeurs simples comme 34, 34, 34. Tu peux aussi choisir chaque couleur dans le sélecteur. Pour rgba(), la valeur alpha est ignorée : l’outil utilise la couleur opaque. Une saisie invalide est signalée dans le champ jusqu’à ce que la valeur soit corrigée.

Si ta combinaison n’atteint pas le niveau AA pour le texte normal (4.5:1), l’outil peut te proposer en un clic la couleur la plus proche qui atteint ce seuil. Il ne modifie que la luminosité du texte ou de l’arrière-plan, selon ce qui demande le moins d’ajustement. Clique sur « Appliquer » pour utiliser la suggestion. Exemple : #777777 sur #ffffff donne 4.48:1 ; la suggestion #767676 atteint 4.54:1.

Oui. Le Contrast Checker inscrit automatiquement les couleurs de premier plan et d’arrière-plan dans l’URL. Si tu copies le lien depuis la barre d’adresse, il ouvrira la même combinaison. Les liens sous l’aperçu te permettent aussi de transmettre la couleur de premier plan au simulateur de daltonisme ou au générateur de palettes de couleurs.

Des lois comme l’European Accessibility Act (EAA) et ses transpositions nationales, ou l’ADA aux États-Unis, imposent un niveau minimal d’accessibilité à de nombreux sites et applications et renvoient généralement aux WCAG. Un contraste suffisant du texte est l’un des critères les plus souvent vérifiés. Cet outil ne remplace pas un conseil juridique, mais t’aide à vérifier toi-même les seuils techniques de contraste WCAG.