Vérificateur de contraste des couleurs
Réponse courte
Vérifiez les ratios de contraste couleur texte-fond par rapport aux standards WCAG AA/AAA.
Contraste limite — vérifiez l'usage en grand texte.
Portez ce vieux whisky au juge blond
Portez ce vieux whisky au juge blond
Comment améliorer
Le niveau AA WCAG exige un ratio de contraste d'au moins 4.5:1 pour le texte normal et 3:1 pour le grand texte (18pt, ou 14pt en gras). Visez 7:1 (AAA) lorsque possible — cela garantit la lisibilité pour les utilisateurs malvoyants et en plein soleil.
Ce que ça fait
Calcule le ratio de contraste WCAG entre n'importe quelle couleur de premier plan et d'arrière-plan que vous saisissez, en utilisant la même formule de luminance relative que la spécification WCAG, et le compare aux seuils AA et AAA pour le texte normal et le texte large (4,5:1 / 3:1 pour AA, 7:1 / 4,5:1 pour AAA). Affiche un aperçu de texte en direct dans vos couleurs, accompagné d'un badge réussite/échec pour chaque seuil.
Pourquoi c'est important
Le texte à faible contraste est l'échec d'accessibilité détecté automatiquement le plus courant sur les pages d'accueil dans le rapport annuel Million de WebAIM, et c'est l'un des plus faciles à corriger avec un changement de couleur. Le critère de succès WCAG 2.1 1.4.3 fixe les ratios minimums, et la norme EN 301 549 — le standard derrière l'Acte européen sur l'accessibilité — les applique au contenu web.
Comment ça fonctionne
-
Saisissez ou choisissez une couleur de premier plan (texte) et une couleur d'arrière-plan
-
Nous calculons le ratio de contraste de luminance relative WCAG entre les deux couleurs
-
Comparez le ratio aux seuils AA et AAA pour le texte normal et le texte large
-
Consultez un aperçu en direct de votre texte sur votre arrière-plan, accompagné d'un badge réussite ou échec pour chaque seuil
Exemple d'entrée et de sortie
foreground: #767676 background: #ffffff
ratio de contraste : 4.54:1 texte normal AA (4,5:1) PASS texte large AA (3:1) PASS texte normal AAA (7:1) FAIL texte large AAA (4,5:1) PASS
Qui l'utilise
-
Designer
Validez la palette de couleurs de la marque selon WCAG avant de la figer. De nombreux pastels « modernes » échouent au ratio 4,5:1 sur fond blanc — mieux vaut le découvrir avant de l'appliquer à toute la marque.
-
Auditeur en accessibilité
Vérifiez chaque paire de couleurs texte/arrière-plan selon les seuils AA et AAA avant de valider la déclaration Annexe V de l'EAA d'un client.
-
Développeur front-end
Repérez les régressions de contraste introduites par des changements de thème via variables CSS avant qu'elles n'atteignent la production.
Questions fréquentes
De quel ratio WCAG ai-je besoin ?
4,5:1 pour le texte normal, 3:1 pour le texte large (≥18pt ou ≥14pt gras) et les composants d'interface. Le niveau WCAG 2.1 AAA exige 7:1 — une barre plus haute que ne visent la plupart des marques.
Cela vérifie-t-il les images et les icônes ?
Uniquement le contraste du texte, et uniquement pour les deux couleurs que vous saisissez ici. Le contraste des images (par exemple des bannières avec texte sur image) nécessite une revue manuelle — il n'y a pas d'analyse automatique de page.
Quel contraste l'EAA exige-t-elle ?
Pour le contenu web, la norme EN 301 549 v3.2.1 applique le niveau AA de WCAG 2.1, y compris le critère 1.4.3 — le texte a donc besoin d'au moins 4,5:1 par rapport à son arrière-plan (3:1 pour le texte large). Vérifiez chaque paire de couleurs utilisée sur votre site.