Aller au contenu
Tools

Vérificateur de contraste gratuit

Rendez chaque association de couleurs plus lisible.

Vérifiez les couleurs du texte et de l’interface selon les WCAG, puis corrigez une paire sans perdre son caractère.

  • Ratio de contraste exact
  • Correction accessible
  • Fonctionne dans ce navigateur

Choisissez les couleurs

Testez un premier plan et un arrière-plan

Saisissez une valeur HEX à trois ou six chiffres, ou utilisez les sélecteurs.

La teinte choisit la famille de couleur. L’intensité va du gris neutre à une couleur vive. La luminosité rapproche le résultat du noir ou du blanc. Les trois réglages forment ensemble la couleur finale.

{{ t('checker.picker', { label: t('checker.foreground') }) }}

{{ pickerHint('foreground') }}

{{ t('checker.picker', { label: t('checker.background') }) }}

{{ pickerHint('background') }}

Ratio de contraste {{ ratioText }}:1 {{ t('score.summary', { passed: passedCount, total: resultRows.length }) }} Détails des résultats
Ratio de contraste {{ ratioText }}:1 sur 21:1

Le ratio mesure l’écart clair–foncé : 1:1 signifie aucun contraste, et un nombre plus élevé est plus facile à distinguer. AA est la cible habituelle ; AAA est plus stricte.

  • {{ result.title }}{{ result.hint }} {{ result.pass ? t('results.pass') : t('results.fail') }}

Aperçu en direct

Voyez les couleurs en contexte

Exemple de grand texte

Un bon contraste rend les paragraphes agréables à lire sur différents écrans et dans diverses conditions.

Correction accessible

Gardez la couleur, corrigez le contraste

La luminosité change en premier. La teinte et l’intensité restent aussi proches que la gamme affichable le permet.

Corriger le premier plan

Cette couleur atteint déjà l’objectif sélectionné.

Modifier seulement cette couleur ne permet pas d’atteindre l’objectif.

Corriger l’arrière-plan

Cette couleur atteint déjà l’objectif sélectionné.

Modifier seulement cette couleur ne permet pas d’atteindre l’objectif.

{{ toast }}