Contrast Checker

Vérificateur de contraste

Try it →

Overview

Check WCAG 2.1 color accessibility for text on background colors.

How to use

  1. Open the Contrast Checker from the sidebar.
  2. Set the foreground (text) color using the left swatch — click to open the picker or type a HEX directly.
  3. Set the background color using the right swatch.
  4. Use the ↕ button to quickly swap foreground and background.
  5. Check the WCAG level indicators (AA/AAA for normal and large text).
  6. The Live Preview shows realistic heading, body text, button, and card examples.

Tips

  • AA Normal Text requires a 4.5:1 minimum contrast ratio.
  • AA Large Text requires 3:1 (text 18pt+ or 14pt bold).
  • AAA Normal Text requires 7:1 (enhanced accessibility).
  • AAA Large Text requires 4.5:1.

Aperçu

Vérifiez l'accessibilité des couleurs selon WCAG 2.1 pour le texte sur fond coloré.

Comment l'utiliser

  1. Ouvrez le Vérificateur de contraste depuis la barre latérale.
  2. Définissez la couleur de premier plan (texte) via le carré gauche.
  3. Définissez la couleur d'arrière-plan via le carré droit.
  4. Utilisez le bouton ↕ pour inverser rapidement les deux couleurs.
  5. Consultez les indicateurs WCAG (AA/AAA pour texte normal et large).
  6. L'aperçu en direct montre des exemples réalistes de titre, texte, bouton et carte.

Conseils

  • AA Texte normal — ratio minimum de 4,5:1.
  • AA Texte large — ratio de 3:1 (texte 18pt+ ou 14pt gras).
  • AAA Texte normal — ratio de 7:1 (accessibilité renforcée).
  • AAA Texte large — ratio de 4,5:1.