Un texte gris clair sur fond blanc peut paraître "élégant" sur une maquette Figma affichée sur l'écran d'un designer réglé à pleine luminosité, et devenir illisible pour tout le monde sur un téléphone en plein soleil. Les directives WCAG (Web Content Accessibility Guidelines) existent justement pour ne pas laisser ça à l'appréciation de chacun.
Ce qu'est vraiment le ratio de contraste
C'est un nombre compris entre 1:1 (couleurs identiques, aucun contraste) et 21:1 (noir pur sur blanc pur, le maximum possible). Il se calcule à partir de la luminance relative de chaque couleur — ce n'est pas juste "soustraire la luminosité" : la formule tient compte du fait que l'œil humain perçoit le vert plus intensément que le bleu, en pondérant donc chaque canal différemment avant de comparer.
Les minimums exigés par WCAG 2.1
| Niveau | Texte normal | Texte large (≥18pt ou ≥14pt gras) |
|---|---|---|
| AA (minimum légal dans de nombreux pays) | 4,5:1 | 3:1 |
| AAA (optimal) | 7:1 | 4,5:1 |
"Texte normal" couvre pratiquement tout votre contenu : paragraphes, labels de formulaire, texte de petits boutons. Le seuil le plus bas (3:1) ne s'applique qu'aux grands titres et au texte en gras de taille généreuse.
Les erreurs les plus courantes
- Placeholders gris clair dans les champs de saisie — généralement autour de 2,5:1, bien en dessous du minimum.
- Texte de marque sur fond de marque — un bleu corporate sur un autre bleu corporate n'atteint presque jamais 4,5:1.
- Boutons "ghost" avec bordure et texte de la même teinte pastel — jolis, illisibles.
- Se fier au contraste sur un écran de designer calibré P3 ; l'utilisateur réel le voit sur un écran bon marché à faible luminosité.
Comment corriger sans repenser la palette
Pas besoin de jeter la palette de marque. Il suffit presque toujours d'assombrir ou d'éclaircir la luminosité (le canal L en HSL) de la couleur problématique en conservant la teinte — notre mélangeur de couleurs et le sélecteur de couleur vous permettent d'ajuster en HSL en temps réel tout en vérifiant le ratio obtenu.
Vérifiez n'importe quelle combinaison avec le vérificateur de contraste WCAG : collez la couleur du texte et celle du fond, et vous verrez le ratio exact ainsi que la conformité AA ou AAA, pour le texte normal comme pour le texte large. Si vous avez besoin de variations d'une couleur de base qui conservent l'identité visuelle, le générateur de palette crée des schémas analogues, complémentaires et monochromes déjà pensés pour une bonne plage de luminosité.