Contraste des couleurs et accessibilité : ce que dit WCAG pour votre marque

Pourquoi le contraste compte

Une couleur de marque magnifique sur votre planche peut devenir illisible pour une personne malvoyante, sur un écran en plein soleil ou en petite taille. Le contraste, c’est l’écart de luminosité entre le texte et son fond. C’est aussi un sujet légal pour de nombreux sites publics et un critère de qualité pour tous les autres.

Les seuils à retenir

Les règles d’accessibilité du web (WCAG 2.2) mesurent un rapport de contraste de 1:1 (aucun contraste) à 21:1 (noir sur blanc).

Tester et corriger sa palette

1. Listez les paires réelles : texte sur fond, bouton et son libellé, lien sur fond.
2. Mesurez chaque paire avec un vérificateur de contraste (les outils de développement des navigateurs en proposent un).
3. Assombrissez ou éclaircissez la couleur fautive : on peut garder la teinte et changer seulement la luminosité.
4. Gardez deux versions de la couleur de marque : l’originale pour les grands aplats, une plus foncée pour le texte.
5. Ne vous fiez pas à la couleur seule : ajoutez une icône ou un texte pour les erreurs et les statuts.

Questions fréquentes

Quel contraste minimum pour un texte ?

Le niveau AA demande 4,5:1 pour un texte courant et 3:1 pour un grand texte. Le niveau AAA monte à 7:1 et 4,5:1.

Mon logo doit-il respecter ces ratios ?

Non, WCAG exempte les logos. Mais il doit rester lisible sur vos fonds : prévoyez des déclinaisons claire, sombre et monochrome.

Comment mesurer un contraste ?

Avec un vérificateur de contraste en ligne ou l’inspecteur de votre navigateur, qui affiche le ratio d’un texte et propose une couleur conforme.