Rapport de contraste
Voir aussi : color contrast
Le rapport de luminance entre un texte et son arrière-plan, sur une échelle de 1:1 à 21:1. WCAG 2.x exige 4,5:1 pour le texte normal et 3:1 pour le texte large (≥ 18pt ou 14pt gras) au niveau AA.
Le rapport de contraste mesure la différence perceptuelle de luminance entre deux couleurs — généralement un texte et son arrière-plan. L’échelle va de 1:1 (aucun contraste — blanc sur blanc) à 21:1 (noir pur sur blanc pur). WCAG définit des ratios minimaux pour la lisibilité du texte.
Les seuils WCAG
Les critères de succès WCAG 2.x 1.4.3 (Contraste minimum, niveau AA) et 1.4.6 (Contraste amélioré, niveau AAA) fixent ces planchers :
| Type de texte | AA | AAA |
|---|---|---|
| Texte normal (< 18pt ou < 14pt gras) | 4,5:1 | 7:1 |
| Texte large (≥ 18pt, ou ≥ 14pt gras) | 3:1 | 4,5:1 |
| Objets graphiques + composants d’interface (1.4.11) | 3:1 | — |
WCAG 2.x mesure le contraste selon la formule WCAG (un rapport basé sur la luminance). WCAG 3 étudie un remplacement perceptuellement uniforme (« APCA » — Accessible Perceptual Contrast Algorithm) qui se comporte différemment pour les arrière-plans très sombres ou très clairs ; APCA n’est pas encore normatif.
Ce qui passe au travers
Le contraste est l’une des rares règles WCAG qu’un outil peut détecter avec fiabilité, aussi les analyseurs automatiques repèrent la plupart des manquements sur texte pur. Ce qui échappe encore :
- Texte d’espace réservé dans les champs de saisie. Souvent #999 ou plus
clair sur blanc — en échec au niveau AA. Les designers recourent aux
espaces réservés à faible contraste pour les distinguer de la valeur saisie,
mais la bonne pratique consiste à utiliser un
<label>séparé au-dessus du champ et un espace réservé à contraste plus élevé (ou aucun espace réservé). - États au survol et au focus. Un bouton avec un contraste par défaut suffisant peut échouer au survol (p. ex. un état gris clair sur blanc). Il faut auditer les éléments interactifs dans chaque état visuel.
- Contrôles désactivés. Les contrôles désactivés sont formellement exemptés
du contraste AA, mais les griser uniquement par un faible contraste
prive les utilisateurs déficients visuels de tout moyen de savoir que le
contrôle est désactivé. Combinez la couleur avec un autre indice — une
icône, un changement de libellé, ou
aria-disabledpour que les lecteurs d’écran l’annoncent. - Texte sur images et dégradés. Les superpositions de haut de page où le même texte passe sur une zone claire et une zone sombre de l’image d’arrière-plan échouent souvent dans la zone la plus claire.
- Icônes utilisées comme seul libellé. Une icône de 24 pixels sans texte doit afficher un rapport de 3:1 par rapport à son arrière-plan (1.4.11), et ce sont les pixels significatifs de l’icône — les contours — qui sont mesurés.
Tests opérationnels
Trois approches permettent de détecter les problèmes de contraste en amont :
- Analyse à la conception. Stark, Able et le vérificateur d’accessibilité d’Adobe XD évaluent le contraste directement dans l’outil de conception. Corriger avant d’écrire le code.
- Palettes tokenisées. Définir chaque association texte/arrière-plan comme un jeton dont le contraste est vérifié une fois pour toutes. Interdire les valeurs de couleur ad hoc sur les composants portant du texte.
- Vérifications automatiques en CI. axe-core, Pa11y ou Lighthouse font échouer les builds en cas de violations de contraste. Peu coûteux à mettre en place, coûteux à ignorer.
Au-delà du plancher
4,5:1 est un minimum, pas une cible esthétique. Les utilisateurs souffrant d’une légère déficience de la vision des couleurs, d’une perte de vision liée à l’âge ou utilisant des écrans de mauvaise qualité préfèrent 7:1 ou plus pour le texte courant. Un site qui atteint tout juste le niveau AA sur chaque élément donne généralement une impression de faible contraste, même aux utilisateurs sans déficience formelle.