Vérificateur de contraste WCAG
Vérifiez le contraste des couleurs selon les normes WCAG 2.1 AA/AAA avec aperçu en direct, suggestions de correction et export CSS
À propos de Vérificateur de contraste WCAG
Vérifiez les ratios de contraste des couleurs selon les directives WCAG 2.1 AA et AAA avec aperçu en direct, suggestions de correction et export CSS — tout dans votre navigateur.
Comment utiliser Vérificateur de contraste WCAG
- 1Entrez ou choisissez une couleur de premier plan (texte) et une couleur d'arrière-plan.
- 2Visualisez le ratio de contraste et les résultats réussite/échec WCAG pour les niveaux AA et AAA.
- 3Vérifiez les aperçus de texte en direct à différentes tailles : texte normal, grands titres, badges, boutons et légendes.
- 4Utilisez « Swap » pour inverser avant-plan et arrière-plan, ou « Random pair » pour l'inspiration.
- 5Copiez les variables CSS pour la paire de couleurs accessible.
Astuces
- WCAG AA exige 4.5:1 pour le texte normal et 3:1 pour le texte large — AAA exige respectivement 7:1 et 4.5:1.
- Passez au plan Starter+ pour obtenir la suggestion de couleur conforme AA la plus proche quand votre paire échoue.
- Testez vos couleurs à leur taille réelle d'utilisation — une paire qui passe pour les titres peut échouer pour le texte de corps petit.
Limites free / payant
Gratuit : vérification de contraste et aperçu. Starter+ : suggestions de correction et paires accessibles.
Outils similaires
Équipe OneKitToolsMise à jour 2.21.4