Question 1

Quel rapport de contraste me faut-il pour WCAG AA ?

Accepted Answer

WCAG 2.2 Niveau AA (Critère de succès 1.4.3) exige un rapport de contraste d'au moins 4,5:1 pour le texte normal, et d'au moins 3:1 pour le texte large (18pt/24px normal, ou 14pt/18,66px gras ou plus).

Question 2

Quel rapport de contraste me faut-il pour WCAG AAA ?

Accepted Answer

WCAG 2.2 Niveau AAA (Critère de succès 1.4.6) exige un rapport de contraste d'au moins 7:1 pour le texte normal, et d'au moins 4,5:1 pour le texte large.

Question 3

Comment le rapport de contraste est-il calculé ?

Accepted Answer

Le rapport de contraste est calculé à partir de la luminance relative des couleurs de premier plan et d'arrière-plan, selon la formule WCAG 2.x : (L1 + 0,05) / (L2 + 0,05), où L1 est la luminance relative de la couleur la plus claire et L2 celle de la plus sombre. Le résultat va de 1:1 (aucun contraste) à 21:1 (noir sur blanc).

Question 4

Le contraste s’applique-t-il aussi aux boutons, aux icônes et aux champs de formulaire ?

Accepted Answer

Oui. Le critère de succès 1.4.11 Contraste du contenu non textuel (niveau AA) des WCAG 2.2 exige un rapport de contraste d’au moins 3:1 avec les couleurs adjacentes pour les parties visuelles des composants d’interface, comme les bordures de champs et les indicateurs de focus, et pour les parties de graphiques nécessaires à la compréhension, comme les icônes porteuses de sens.

Question 5

Les boutons désactivés et les logos doivent-ils respecter les exigences de contraste ?

Accepted Answer

Non. Le critère de succès 1.4.3 exempte le texte des composants d’interface inactifs, le texte purement décoratif, le texte faisant partie d’une image comportant d’autres contenus visuels importants, et les logos ou noms de marque.

Question 6

Comment corriger un contraste insuffisant sans changer les couleurs de ma marque ?

Accepted Answer

Gardez la couleur de marque pour les fonds, les grands titres et les éléments décoratifs, et utilisez une nuance plus foncée ou plus claire pour le texte courant, où 4.5:1 s’applique. Le texte de grande taille ne demande que 3:1, donc la couleur de marque y convient souvent. Quand une combinaison échoue, cet outil propose les couleurs conformes les plus proches.

Analyseur de Contraste des Couleurs

Sélectionner les Couleurs

Statut de Conformité

Aperçu en Direct

Directives WCAG

Niveau AA (Minimum)

Niveau AAA (Amélioré)

Texte Large

Questions Fréquentes