KolorPal

Vérificateur de contraste

Assurez-vous que vos designs sont accessibles avec ce vérificateur de contraste WCAG 2.1 gratuit. Saisissez n'importe quelle combinaison de couleur de texte et d'arrière-plan pour voir instantanément le rapport de contraste et sa conformité AA ou AAA pour le texte normal et le grand texte.

Preview Text

The quick brown fox jumps over the lazy dog

Small text sample for accessibility testing

Contrast Ratio

4.60:1

AA Normal

Pass

AAA Normal

Fail

AA Large

Pass

AAA Large

Pass

Testez n'importe quelle paire texte/fond selon WCAG 2.1

Le vérificateur de contraste calcule le rapport de contraste de luminance entre une couleur de premier plan et une couleur de fond, et vous indique si la paire respecte WCAG 2.1 aux niveaux AA et AAA, pour le texte normal comme pour le grand texte. Le rapport utilise la formule de luminance relative définie par le W3C, donc la valeur affichée ici correspond à celle des audits d'accessibilité automatisés. Aucun envoi de fichier, aucun compte ; le résultat se met à jour pendant que vous saisissez.

Comment l'utiliser

  1. Saisissez la couleur du texte et celle du fond en codes hex, ou utilisez les sélecteurs de couleur.
  2. Lisez le rapport, affiché sous la forme n:1. 21:1 correspond à du noir sur blanc ; 1:1 à aucun contraste.
  3. Consultez les quatre badges : AA Normal (4,5:1), AAA Normal (7:1), AA Grand (3:1) et AAA Grand (4,5:1).
  4. Ajustez la couleur la plus claire jusqu'à ce que tous les badges nécessaires passent au vert, puis copiez les codes hex dans votre design.

Qu'est-ce qu'un grand texte ?

WCAG définit le grand texte comme au moins 18 pt (24 px) en graisse normale, ou 14 pt (environ 18,66 px) en gras. Tout ce qui est plus petit est du texte normal et exige le rapport le plus élevé. Les icônes, bordures et contours de formulaire sont du contenu non textuel et nécessitent au moins 3:1 selon le critère de succès 1.4.11.

Exemples

Conseils

Frequently Asked Questions

Qu'est-ce que le rapport de contraste WCAG AA ?▾

WCAG AA exige un rapport de contraste minimum de 4,5:1 pour le texte normal et de 3:1 pour le grand texte (14 pt ≈ 18,66 px en gras, ou 18 pt = 24 px en graisse normale). Cela garantit la lisibilité pour les personnes ayant une déficience visuelle modérée.

Quelle est la différence entre WCAG AA et AAA ?▾

WCAG AAA est plus strict : il exige 7:1 pour le texte normal et 4,5:1 pour le grand texte. AAA offre une meilleure lisibilité mais est plus difficile à atteindre avec des designs colorés. AA est l'exigence standard.

Comment vérifier le contraste des couleurs pour l'accessibilité ?▾

Saisissez votre couleur de texte et votre couleur de fond ci-dessus. L'outil calcule instantanément le rapport de contraste et indique s'il respecte WCAG AA et AAA pour le texte normal et le grand texte.

Quel rapport de contraste est requis pour les composants d'interface ?▾

Les composants non textuels (icônes, bordures, champs de formulaire) exigent un rapport de contraste minimum de 3:1 par rapport à leur fond, selon le critère de succès 1.4.11 de WCAG 2.1.