Vérificateur de Contraste des Couleurs
Vérifiez le ratio de contraste entre deux couleurs selon les normes d'accessibilité WCAG 2.1. Résultats instantanés de conformité AA et AAA.
Ratio de Contraste
21.00:1
Résultats WCAG 2.1
Texte Normal
(< 18pt / < 14pt gras)
Necessite 4.5:1
Necessite 7:1
Grand Texte
(>= 18pt / >= 14pt gras)
Necessite 3:1
Necessite 4.5:1
Composants UI
(Icones, bordures, champs)
Necessite 3:1
Apercu en Direct
Exemple de Titre
Voici comment votre texte apparaîtra avec les couleurs de premier plan et d'arriere-plan sélectionnées. Vérifiez la lisibilité a différentes tailles.
Petit texte (12px) — vérifiez attentivement l'accessibilité.
Comment ça Marche
Choisissez vos couleurs
Utilisez les sélecteurs de couleurs ou saisissez des valeurs hexadecimales.
Vérifiez le ratio
Voyez le ratio de contraste et les résultats WCAG AA/AAA instantanément.
Ajustez pour la conformité
Modifiez les couleurs jusqu'a atteindre les exigences WCAG pour votre niveau cible.
Pourquoi le contraste des couleurs est important pour l'accessibilité
Le contraste des couleurs est une exigence clé en accessibilité. Le WCAG 2.1 niveau AA exige un ratio de contraste minimum de 4.5:1 pour le texte normal et 3:1 pour le grand texte (18pt+ ou 14pt+ gras). Le niveau AAA est plus strict, exigeant 7:1 pour le texte normal.
Un mauvais contraste rend le contenu illisible pour les personnes malvoyantes, daltoniennes ou celles qui consultent des écrans en plein soleil. Environ 1 homme sur 12 et 1 femme sur 200 ont une forme de deficience de la vision des couleurs.