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). Voir réussite/échec pour les niveaux AA et AAA, pour le texte normal, le texte de grande taille (18 pts ou plus ou 14 pts en gras) et les composants de l'interface utilisateur. Indispensable avant d'expédier des boutons, des liens et des étiquettes de formulaire : de nombreuses palettes de marque échouent jusqu'à ce que vous assombrissiez le texte ou éclairciez les surfaces.
Couleur du texte
Couleur d'arrière-plan
Aa Bb Cc — 123
Result
16.12 : 1
AA — Réussi
AA (grand texte) — Réussi
AAA — Réussi
AAA (grand texte) — Réussi
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.
Quand choisir autre chose
• Lorsque vous avez besoin d'un audit d'une page complète, utilisez des scanners automatisés sur le DOM rendu.
• Lors du test d'arrière-plans non unis (images, dégradés), échantillonnez les pixels les plus défavorables.
• Lors de la simulation du daltonisme, utilisez des simulateurs de vision spécialisés.
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.
Réparer les échecs sans rebranding
Si le violet de la marque échoue sur le blanc, n'échangez pas de teinte : assombrissez le premier plan par incréments de luminosité de 5 à 10 % ou utilisez le violet uniquement pour les grands titres. Le texte de l'espace réservé doit respecter le contraste (4,5 : 1), et pas seulement les valeurs d'entrée. Les États handicapés peuvent être exemptés du contraste strict du texte, mais ne doivent pas transmettre d'informations critiques uniquement par la couleur. Associez ce vérificateur au convertisseur de couleurs pour une itération HSL rapide.
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.
Mes données sont-elles envoyées à un serveur ?
Non.
Cet outil est-il gratuit ?
Oui.