Vérificateur de Contraste des Couleurs

Vérifiez le ratio de contraste WCAG entre couleurs de texte et de fond, avec niveaux AA/AAA pour texte normal et grand.

Couleurs
Vérifiez le ratio de contraste WCAG entre couleurs de texte et de fond, avec niveaux AA/AAA pour texte normal et grand.
Résultats
Les couleurs transparentes sont mélangées avec du blanc pour le contraste.
Rapport de contraste
18.88:1
AA (normal): RéussiAA (grand): RéussiAAA (normal): RéussiAAA (grand): Réussi
Premier plan
#111111
Arrière-plan
#FFFFFF
Aa Bb Cc 123
Aperçu
Texte normal / Texte grand
Texte normal

Aa Bb Cc 123

Texte grand

Aa Bb Cc 123

Qu’est-ce que le contraste de couleur ?

Le ratio de contraste mesure la différence de luminance entre le texte (premier plan) et le fond sur une échelle de 1:1 (aucun contraste) à 21:1 (noir sur blanc).

Cet outil convertit les couleurs en sRGB, compose la transparence avant la comparaison et utilise la formule de luminance relative WCAG.

Seuils WCAG

  • AA : 4.5:1 pour le texte normal, 3:1 pour le texte large.
  • AAA : 7:1 pour le texte normal, 4.5:1 pour le texte large.
  • Le texte large correspond à 18pt+ normal ou 14pt+ gras.
  • Les composants d’UI, icônes et éléments graphiques devraient viser au moins 3:1.

Des ratios plus élevés améliorent la lisibilité, surtout pour les polices fines ou les petites tailles.