Outils · Couleur · Vérifier le contraste des couleurs
Vérifier le contraste des couleurs
Vérifiez si deux couleurs respectent les exigences de contraste WCAG pour le texte et l'interface.
Ajoutez un fichier et lancez l’outil.
Votre fichier est prêt.
Essayez un autre fichier, ou réessayez.
Réglages
Ajustez les réglages ci-dessous. Le résultat se met à jour au fur et à mesure.
Fonctionne entièrement dans votre navigateur. Aucun fichier n'est envoyé.
Fonctionne entièrement dans votre navigateur. Rien n'est jamais envoyé à un serveur.
Comment ça marche
Choisissez ou saisissez une couleur de texte et une couleur de fond.
Lisez le rapport de contraste et voyez s'il passe les niveaux AA et AAA.
Ajustez l'une des deux couleurs jusqu'à atteindre le niveau dont vous avez besoin.
Questions fréquentes
4,5:1 pour le texte normal, et 3:1 pour le grand texte (18pt, ou 14pt gras) et pour les composants d'interface et les graphiques significatifs.
7:1 pour le texte normal et 4,5:1 pour le grand texte - un niveau plus strict, non requis pour la plupart des sites mais utile à atteindre quand c'est facile.
Un texte de 18pt (24px) normal, ou 14pt (19px) gras, selon la définition propre à WCAG.
Oui, ça vérifie aussi le seuil de 3:1 pour les composants d'interface (comme les bordures de bouton et les champs de formulaire) et les graphiques significatifs, selon la règle de contraste non textuel de WCAG 2.1.
Non. Le rapport est calculé entièrement dans votre navigateur.
Guides
Un aperçu plus précis de problèmes concrets que résout cet outil.
Why 'It Looks Fine to Me' Isn't Good Enough for Text Color
Contrast is a measurable ratio, not a matter of taste - and a designer judging a color pair on their own calibrated screen is testing one combination out of many their visitors actually have.
Lire le guideHow to Check Your Text Passes WCAG Contrast (AA and AAA)
Pick a text color and a background color and four pass/fail badges update immediately - no button to press. Here is what each one means and how to read them.
Lire le guideDark Mode Text Contrast: Why Light Gray Often Fails WCAG
Softening white text toward gray feels right on a dark background, and it is exactly where contrast ratios erode fastest. Here is where the real numbers land.
Lire le guide
Commentaires