Qu'est-ce que Vérificateur de Contraste WCAG ?

Un vérificateur de contraste des couleurs WCAG qui calcule le ratio de contraste entre les couleurs de premier plan et d'arrière-plan, et indique si la combinaison satisfait aux normes d'accessibilité WCAG 2.1 Niveau AA et AAA pour le texte normal et le grand texte.

Le vérificateur calcule le rapport de luminance relative WCAG 2.1 entre deux couleurs — saisies en hex, rgb(), hsl() ou sous un nom CSS — et le confronte aux niveaux AA (4,5:1 pour le texte courant, 3:1 pour le texte large) et AAA (7:1 et 4,5:1). Il vérifie aussi le plancher 3:1 pour les composants d'interface comme les bordures de champ et les icônes. En cas d'échec, le panneau de suggestions glisse le premier plan vers une valeur conforme, en proposant des cibles AA et AAA.

Comment utiliser

1. Saisissez ou choisissez une couleur de premier plan (texte) et une couleur d'arrière-plan : collez du hex, rgb(), hsl() ou un nom de couleur CSS, ou utilisez les sélecteurs de couleur.
2. Consultez le ratio de contraste et les résultats de conformité WCAG AA et AAA pour le texte normal, le grand texte et les composants d'interface.
3. Si le contraste est insuffisant, utilisez les suggestions d'ajustement de couleur pour trouver la combinaison accessible la plus proche.

Quand l'utiliser

• Auditer les couleurs de marque sur fond blanc ou foncé avant la mise en ligne d'une landing.
• Définir des états de bouton accessibles (normal, survol, désactivé).
• Vérifier le texte d'espace réservé et les champs désactivés qui passent souvent sous 4,5:1.

Résultat

Un designer UI vérifie le bleu de sa marque #3B82F6 sur blanc #FFFFFF — le ratio de 4,5:1 passe le niveau AA pour le grand texte mais échoue au niveau AAA pour le texte normal. Il assombrit à #2563EB (5,3:1) pour satisfaire les deux niveaux.

FAQ

Quel ratio faut-il pour que le texte courant passe en WCAG AA ?

4,5:1 par rapport au fond. Le texte large (à partir de 18pt en regular ou 14pt en gras) tombe à 3:1. Le niveau AAA monte à 7:1 et 4,5:1 respectivement. Les composants d'interface, comme les bordures de champ, n'exigent que 3:1.

Pourquoi mon gris foncé sur blanc échoue alors qu'il me semble net ?

Le ressenti personnel et la mesure divergent vite. Un 4:1 paraît net sur un écran calibré bien éclairé mais déraille avec une basse vision, des reflets ou un vieux moniteur. Le WCAG fixe le seuil pour le pire cas, pas le meilleur.

Les icônes et bordures doivent-elles atteindre le même contraste que le texte ?

Non. WCAG 2.1 a ajouté la règle 3:1 pour les éléments non textuels : bordures, icônes, indicateurs de focus, éléments de graphique. Les images purement décoratives sont exemptées, mais tout ce qui transmet de l'information doit atteindre 3:1 face aux couleurs voisines.

Comment corriger une combinaison qui échoue sans toucher à la marque ?

Si la couleur de marque est figée, ajustez le fond. Foncez ou éclaircissez jusqu'à passer le ratio. Le panneau ici déplace le premier plan par petits pas ; appliquez la même logique au fond si besoin.

WCAG couvre-t-il les textes translucides ou posés sur photo ?

WCAG demande d'évaluer le pire pixel sous le texte. Sur une photo, cela implique souvent un voile teinté ou une plaque pleine derrière les mots. Mesurez la couleur réellement rendue, pas seulement le hex initial.

Outils similaires