Hub Global d'Outils
Langue actuelle: French

Contrast Checker

Comparez la couleur du texte et du fond pour valider le contraste et l'accessibilité WCAG.

Mode d'emploi

  1. Saisissez les couleurs HEX du texte et du fond ou utilisez les sélecteurs.
  2. Utilisez le bouton d'échange pour inverser rapidement les couleurs.
  3. Consultez le ratio de contraste et les résultats WCAG ci-dessous.

Utilisez des HEX à 6 caractères (par exemple #111827).

Utilisez des HEX à 6 caractères (par exemple #111827).

Guide rapide du contraste

Vérifiez rapidement la lisibilité ici, puis ouvrez les guides liés pour corriger les problèmes de contraste dans des cas concrets.

Quand utiliser cet outil

  • Avant de publier de nouvelles couleurs de boutons, liens ou textes.
  • Quand une revue signale un texte difficile à lire.
  • Quand vous testez des couleurs de marque sur fonds clairs et foncés.

Étapes rapides

  1. Saisissez les HEX du texte (premier plan) et du fond.
  2. Vérifiez le ratio et les résultats WCAG AA/AAA.
  3. Ajustez les couleurs puis retestez jusqu'à validation.

Erreurs fréquentes

  • Tester uniquement les titres et ignorer le texte courant.
  • Valider un seul état et oublier hover, focus et disabled.
  • Se fier au ressenti visuel sans mesurer le ratio.

Guides liés Contrast Checker

Consultez des guides courts pour corriger un faible contraste et mieux choisir les couleurs UI accessibles.