Vérificateur de contraste des couleurs

Vérifiez les rapports de contraste WCAG pour les couleurs de premier plan et d'arrière-plan, prévisualisez du vrai texte, voyez les résultats AA et AAA et copiez un rapport d'accessibilité.

Vérifiez le contraste WCAG avant de publier une paire de couleurs

Utilisez le Vérificateur de contraste des couleurs pour tester des couleurs de premier plan et d'arrière-plan selon les seuils WCAG courants. Saisissez ou choisissez des couleurs, prévisualisez votre propre texte, réglez la taille et la graisse de police, puis copiez un rapport clair pour revue design ou suivi d'incident.

Le résultat inclut le rapport de contraste exact, les états réussite ou échec AA et AAA pour texte normal, grand texte et composants d'interface, ainsi que des suggestions pratiques de premier plan.

À utiliser quand

  • Vous choisissez des couleurs de texte et d'arrière-plan pour boutons, cartes, tableaux de bord, formulaires ou documentation.
  • Vous auditez des couleurs de marque avant de les utiliser dans du texte d'interface lisible.
  • Vous vérifiez si une taille de police compte comme grand texte selon les seuils WCAG.
  • Vous copiez une note d'accessibilité dans un ticket, une pull request ou une transmission design.

Chargement de l'outil...

FAQ du vérificateur de contraste des couleurs

Quels seuils sont vérifiés ?

L'outil vérifie 4.5:1 et 7:1 pour le texte normal, 3:1 et 4.5:1 pour le grand texte, et 3:1 pour les composants d'interface.

Le texte en gras change-t-il le résultat grand texte ?

Oui. Le texte en gras est considéré comme grand à une taille en pixels plus faible que le texte normal.

Puis-je trouver une couleur accessible proche ?

Oui. Le vérificateur suggère une direction de premier plan AA proche tout en préservant la teinte d'origine autant que possible.

Outils associés