Définition technique
Rapport de luminosité entre la couleur du texte (ou des éléments graphiques essentiels) et celle du fond. Les recommandations WCAG définissent des niveaux minimaux : AA (4,5:1 pour le texte normal, 3:1 pour le gros texte), AAA (7:1 et 4,5:1). Un contraste insuffisant rend le texte illisible pour les malvoyants et dans des conditions de luminosité défavorables. Les outils (Contrast Checker, Lighthouse) permettent de vérifier les ratios ; le contraste doit être assuré aussi pour les états (focus, disabled, liens visités). Le ratio se calcule avec la luminance relative des deux couleurs. Les textes décoratifs (logos, éléments purement visuels) peuvent être exclus du critère ; les textes informatifs et les icônes fonctionnelles doivent le respecter. Les couleurs de lien et de lien visité ont les mêmes exigences que le texte.
Comment ça fonctionne ?
Le ratio de contraste se calcule à partir des luminances du texte et du fond. Les outils (Contrast Checker, Lighthouse) donnent le ratio ; WCAG AA exige 4,5:1 pour le texte normal et 3:1 pour le gros texte. Les états (focus, lien visité) doivent aussi respecter un contraste suffisant.
L'erreur classique à éviter
Texte gris clair sur fond blanc ou fond gris sur fond blanc sans vérification. Oublier les états interactifs (boutons, liens, champs) qui ont souvent des couleurs différentes. Supposer qu'un design « joli » respecte automatiquement le contraste.
Impact business : pourquoi s'en soucier ?
Un mauvais contraste dégrade l’accessibilité (risque juridique et exclusion d’une partie du public) et la lisibilité pour tous. Les sites conformes WCAG AA/AAA renforcent l’image de marque et limitent les risques de contentieux. Le contraste est un critère facile à mesurer et à corriger en amont. Dans certains secteurs (public, santé), la conformité WCAG est une obligation légale ou contractuelle. Un bon contraste améliore aussi l’expérience en plein soleil ou sur écran de mauvaise qualité.
La règle d'or
Vérifier chaque combinaison texte/fond avec un outil (WebAIM, DevTools). Viser au minimum WCAG AA (4,5:1 texte normal, 3:1 gros texte). Contrôler focus, hover et lien visité. Documenter les couleurs validées dans la charte.