Vérificateur de contraste WCAG
Testez n’importe quelle paire de couleurs de premier plan et d’arrière-plan pour le rapport de contraste WCAG 2,1 (1 à 21).
Comment vérifier le contraste des couleurs
1. Saisissez ou choisissez les couleurs de premier plan (texte) et d’arrière-plan.
2. Lisez le rapport de contraste (par exemple 4,52:1).
3. Vérifiez les lignes AA et AAA pour les tailles de texte normales et grandes.
4. Ajustez la luminosité HSL jusqu'à ce que le niveau requis soit atteint, puis copiez les valeurs hexadécimales.
Exemples de vérification de contraste
Corps du texte #374151 sur #FFFFFF
Ratio ≈ 8,9 : 1 – passe AAA pour un texte normal (nécessite 7 : 1). Lecture longue et confortable.
Gris clair #9CA3AF sur blanc
Ratio ≈ 2,6 : 1 — échoue à AA pour le texte normal (nécessite 4,5 : 1). Erreur d'espace réservé courante.
Bouton primaire blanc sur #2563EB
Rapport ≈ 4,6 : 1 – passe le texte normal AA ; passez au bleu plus foncé pour une utilisation AAA ou de grande taille uniquement.
Quand utiliser cet outil
• Lorsque vous auditez les jetons du système de conception avant leur publication.
• Lorsque vous corrigez les résultats d’accessibilité de Lighthouse ou Axe.
• Lorsque vous choisissez des couleurs de lien qui doivent différer du corps du texte, pas seulement par la teinte.
WCAG 2.1 niveaux expliqués
Le niveau A est minimum ; AA est la cible légale dans de nombreuses juridictions (ADA, secteur public EAA). AAA est un objectif ambitieux pour le corps du texte : les gros titres peuvent passer le AAA plus facilement que les légendes de 14 px. Les indicateurs visibles de mise au point (2.4.7) complètent le contraste : les utilisateurs de clavier ont besoin de bagues de mise au point visibles, souvent 3 : 1 par rapport aux couleurs adjacentes. Documentez la réussite/l'échec dans votre système de conception à côté de chaque paire de jetons.
Questions fréquentes
Quel rapport de contraste pour le texte normal WCAG AA ?
Au moins 4,5 : 1 pour le texte normal et 3 : 1 pour le texte volumineux (18 pts+ ou 14 pts en gras).
Et pour l'AAA ?
Texte normal 7:1, texte large 4,5:1 — plus strict, souvent utilisé pour les sites gouvernementaux.
Les composants de l’interface utilisateur ont-ils besoin de contraste ?
WCAG 2.1 nécessite 3:1 pour les objets graphiques et les limites des composants de l'interface utilisateur (1.4.11).
Comment est calculé le ratio ?
Basé sur la luminance relative des couleurs sRGB : (L1 + 0,05) / (L2 + 0,05) où L1 est plus clair.
Le soulignement corrige-t-il les liens à faible contraste ?
Non, le contraste est toujours requis. Les soulignements aident les indices non colorés mais ne remplacent pas les règles de ratio.