Vérificateur de contraste couleur
Assurez-vous que votre texte et votre interface respectent les exigences de contraste WCAG 2.1 — un élément essentiel de la conformité EAA/EN 301 549. Collez les couleurs de marque, prévisualisez les combinaisons et obtenez une évaluation claire pour le texte normal, le texte large et les composants UI.
Approuvé par des organisations à travers l’Europe travaillant pour la conformité aux normes WCAG et EAA
Qu’est-ce qu’un vérificateur de contraste et pourquoi l’utiliser ?
Un contraste suffisant améliore la lisibilité pour tous — particulièrement pour les personnes avec une vision réduite, des déficiences de perception des couleurs ou sur des écrans de faible qualité.
Vérifiez 1.4.3 Contraste (Minimum), 1.4.6 Contraste (Amélioré) et 1.4.11 Contraste non textuel pour les composants UI et graphiques.
La directive européenne sur l’accessibilité renvoie à EN 301 549 qui à son tour renvoie à WCAG — le contraste est une composante clé pour répondre aux obligations.
Des palettes accessibles créent des interfaces robustes et lisibles qui fonctionnent dans des thèmes clairs/sombres et sur divers appareils.
Seuils de contraste WCAG 2.1 (référence rapide)
Ratio minimum : 4,5:1 (texte < 24 px normal / 19 px gras).
Ratio minimum : 3:1 (≥ 24 px normal ou ≥ 19 px gras).
Contraste minimum avec les couleurs adjacentes : 3:1 (raccords de focus, champs de formulaire, icônes etc.).
Tester le vérificateur de contraste
Entrez des couleurs de premier plan et d’arrière-plan (HEX). L’outil calcule le ratio de contraste et affiche réussite/échec pour les niveaux WCAG. Les résultats se mettent à jour au fil de la saisie.
Color Contrast Checker
Example text preview
Contrast ratio: 8.67:1
Normal text
Contrast Ratio:8.67:1
Normal Text (WCAG AA)
Pass ≥ 4.5
AAA
Pass ≥ 7.0
FAQ
WCAG 2.1 modifie-t-il les ratios de contraste ?
L’EAA exige-t-il le contraste WCAG ?
Qu’est-ce qui est considéré comme “texte large” ?
Intégrez les contrôles de contraste dans votre workflow
Effectuez des contrôles de contraste lors des revues design et code. Combinez-les avec une analyse automatisée pour détecter les problèmes à grande échelle.