Le contraste WCAG expliqué
Un contraste faible exclut des utilisateurs et nuit à la lisibilité. Les ratios sont simples — 4,5:1 pour le corps de texte — et faciles à vérifier.
Pourquoi le contraste compte
Le contraste est la différence de luminance entre un texte et son fond. Trop faible, le texte devient illisible pour les personnes malvoyantes — et désagréable pour tous. WCAG fixe des minima mesurables.
Vérifiez n’importe quelle paire avec le vérificateur de contraste.
Les seuils WCAG
| Niveau | Texte normal | Grand texte |
|---|---|---|
| AA | 4,5:1 | 3:1 |
| AAA | 7:1 | 4,5:1 |
« Grand » signifie 18 pt (24 px) ou 14 pt (18,66 px) gras et plus. Les ratios vont de 1:1 (identique) à 21:1 (noir sur blanc).
Où le contraste échoue le plus
- Texte gris clair sur blanc (légendes « discrètes »).
- Placeholder des champs de formulaire.
- Texte sur photo ou dégradé.
- Boutons à texte coloré sur fond coloré.
- Contours de focus qui disparaissent.
Comment vérifier
- Relevez les couleurs de texte et de fond (avec une pipette).
- Calculez le ratio avec le vérificateur de contraste WCAG.
- Ajustez jusqu’au niveau visé.
Comment corriger
- Assombrir le texte — le correctif habituel du gris sur blanc.
- Éclaircir le fond.
- Augmenter la graisse ou la taille (les règles « grand texte » sont plus souples).
- Ajouter un fond opaque derrière le texte sur image.
- Ajouter un contour/ombre pour le texte sur photo.
Ne pas reposer uniquement sur la couleur
Les daltoniens peuvent manquer une information portée uniquement par la couleur (statuts rouge/vert). Ajoutez des icônes, libellés ou motifs. WCAG appelle cela « utilisation de la couleur » (1.4.1).
Visez plus haut que le minimum
AA est le socle légal dans de nombreux contextes ; AAA (7:1) est plus confortable. Pour le corps de texte, visez au moins 7:1 quand c’est possible.
Vérifiez votre palette
Testez vos couleurs de marque avec le vérificateur de contraste avant de livrer un design system, pas après.