Contrastes et couleurs : rendre lisible sans renoncer à l’identité
Une palette de marque est rarement conforme du premier coup. Comment ajuster les teintes, définir des rôles de couleur et garder une identité reconnaissable.
Le graphiste présente un bleu pâle sur fond blanc : élégant, très « marque ». L’auditeur accessibilité mesure un rapport de contraste de 2,3 pour 1, alors qu’il en faut au moins 4,5 pour du texte courant. Faut-il abandonner l’identité ? Non. Il faut apprendre à régler les contrastes et couleurs sans perdre la signature visuelle, ce qui est plus simple qu’on ne le croit.
Le cadre en trois seuils
Les règles de WCAG 2.2 (niveau AA), que reprend le RGAA français, tiennent en quelques valeurs :
- Texte courant : rapport d’au moins 4,5:1 (critère 1.4.3).
- Grand texte (18 points ou 14 points en gras) : au moins 3:1.
- Composants d’interface et éléments graphiques porteurs d’information, comme le contour d’un champ ou une icône sans libellé : au moins 3:1 (critère 1.4.11).
- La couleur ne doit jamais être le seul moyen de transmettre une information (critère 1.4.1).
La méthode : séparer la teinte de la luminosité
Le contraste dépend surtout de la luminosité relative des deux couleurs, très peu de la teinte. On peut donc garder la teinte de la marque, le bleu qui la signe, et abaisser sa luminosité pour le texte et les contours. Le bleu pâle devient un bleu soutenu, de même famille. L’identité tient à la teinte, à la cohérence et à l’usage, pas à un niveau de pâleur.
- Auditer la palette existante. Mesurer chaque paire texte/fond réellement utilisée, pas seulement les couleurs de la charte.
- Définir des rôles. Une couleur de marque pour les aplats et les grands titres, une variante plus foncée pour le texte et les liens, une variante intermédiaire pour les contours.
- Nommer ces rôles dans la charte et dans les variables du code (couleur de texte, de lien, de bordure, de fond), plutôt que des noms de couleurs.
- Tester les états : survol, focus, désactivé, erreur. C’est là que les écarts se cachent.
- Valider sur écran réel, y compris sous un fort éclairage et avec un réglage de luminosité bas.
Quelques cas fréquents et leur solution
| Cas | Problème | Solution qui garde l’identité |
|---|---|---|
| Texte de marque clair sur fond blanc | Contraste insuffisant | Utiliser la couleur de marque en aplat, et une version plus foncée pour le texte |
| Bouton coloré avec texte blanc | Texte blanc sur teinte moyenne | Foncer légèrement le bouton ou passer au texte foncé sur fond clair |
| Texte sur photographie | Contraste variable selon la zone | Voile semi-opaque ou bandeau uni sous le texte |
| Erreur signalée en rouge seulement | Information portée par la couleur seule | Ajouter une icône et un message textuel |
| Graphique en plusieurs teintes | Séries indiscernables pour le daltonisme | Ajouter des motifs, des étiquettes directes, des marqueurs distincts |
Une identité de marque se reconnaît à son système (teintes, formes, ton), pas à une valeur de gris-bleu qu’on peut assombrir de dix pour cent.
Les pièges
- Le mode sombre. Il faut recalculer les contrastes, pas inverser mécaniquement. Un texte blanc pur sur noir pur fatigue aussi ; certains préfèrent des gris adoucis, tout en respectant les seuils.
- Les couleurs d’état. Un vert de succès et un rouge d’erreur se confondent pour un daltonien : leurs luminosités doivent différer, et une icône doit les accompagner.
- Les placeholders et textes désactivés. Les champs désactivés sont exemptés des seuils, mais pas les indications qui aident à remplir un formulaire.
Traiter le contraste dès la conception de la charte coûte beaucoup moins que de corriger après coup des centaines de pages. Une palette avec des rôles nommés est conforme par construction.
Les outils pour mesurer sont décrits dans notre comparatif sur la vérification des contrastes. Pour auditer votre charte, notre pôle Accessibilité et inclusion propose un accompagnement, et le dossier complet replace le sujet dans une démarche d’ensemble.
Questions fréquentes
Peut-on garder une couleur de marque claire ?
Oui pour les aplats, les grands éléments décoratifs et les fonds. Pour le texte, les liens et les contours porteurs d'information, utilisez une variante plus foncée de la même teinte.
Le mode sombre doit-il respecter les mêmes seuils ?
Oui. Les rapports de contraste s'appliquent quelle que soit la couleur de fond. Il faut les vérifier séparément pour chaque thème.
Les logos sont-ils soumis aux seuils de contraste ?
Non, les logotypes sont exemptés des exigences de contraste de WCAG. Les éléments d'interface et le texte autour, eux, y sont soumis.
Comment tester pour le daltonisme ?
Avec des simulateurs de vision des couleurs, mais surtout en vérifiant que l'information ne repose pas sur la couleur seule et que les luminosités des teintes diffèrent.