Contraste

Le contraste mesure la différence de luminosité entre deux couleurs, exprimée en ratio de 1:1 à 21:1. En accessibilité web, les WCAG imposent un ratio minimum de 4,5:1 pour le texte courant et de 3:1 pour le texte de grande taille et les composants d'interface. Un contraste insuffisant est l'erreur d'accessibilité la plus répandue sur le web.

Depuis sept ans, le WebAIM Million place le texte à faible contraste en tête des erreurs d'accessibilité détectées sur un million de pages d'accueil. Sept rapports, le même résultat. Et la plupart du temps, les développeurs ne s'en rendent pas compte à l'œil nu.

#Quels ratios respecter ?

Le critère 1.4.3 des WCAG (niveau AA) fixe deux seuils :

• Texte courant : ratio de 4,5:1 minimum
• Texte de grande taille (≥ 24 px, ou ≥ 18,5 px en gras) : ratio de 3:1 minimum

Le niveau AAA relève la barre : 7:1 pour le texte courant, 4,5:1 pour le grand texte.

Depuis les WCAG 2.1, le critère 1.4.11 étend l'exigence aux composants d'interface (bordures de champs, boutons, icônes) et aux objets graphiques porteurs d'information : 3:1 minimum.

/* Bordure de champ : conforme */
input {
  border: 1px solid #767676; /* 4,54:1 sur fond blanc */
}
 
/* Bordure trop claire : non conforme */
input {
  border: 1px solid #e5e5e5; /* bien en dessous de 3:1 */
}

#Le piège du gris « lisible »

Le gris #999999 sur fond blanc donne un ratio de 2,85:1. Votre œil le lit sans effort. Un outil de vérification le refuse. Ce décalage entre perception personnelle et seuil normatif est la cause principale des erreurs de contraste.

Les placeholder de formulaires en sont un cas typique : le texte d'aide par défaut de la plupart des navigateurs est trop clair pour passer le test AA. Si votre placeholder transmet une information utile, son contraste compte.

Autre angle mort : le mode sombre. Des couleurs conformes sur fond blanc peuvent échouer sur fond sombre. Vérifiez chaque thème séparément.

#Comment vérifier

Le ratio se calcule à partir de la luminance relative des deux couleurs. Pas besoin de le faire à la main : le Contrast Checker de WebAIM ou l'inspecteur de Chrome (clic sur une couleur dans le panneau Styles) affichent le ratio en temps réel.

#En résumé

Visez 4,5:1 pour le texte, 3:1 pour les composants d'interface. Ne vous fiez pas à votre écran : testez avec un outil. Et n'oubliez pas les placeholders, les bordures et le mode sombre.