L’accessibilité et l’image de marque sont souvent opposées, comme si l’une devait céder le pas à l’autre. Le vrai problème est bien plus circonscrit. Ce texte s’adresse aux équipes de communication et aux designers qui ont la charge d’une palette et à qui l’on a dit qu’elle échouait.
Ce qu’exige la norme
Les WCAG 2.2 exigent un rapport de contraste d’au moins 4,5:1 pour le texte et de 3:1 pour le grand texte, défini comme un texte d’au moins 18 points, ou 14 points en gras. Les composants d’interface utilisateur et les graphiques porteurs de sens doivent atteindre 3:1 par rapport à ce qui les jouxte. La couleur ne peut pas non plus être le seul moyen de transmettre une information. Le texte qui fait partie d’un logo ou d’un nom de marque n’est soumis à aucune exigence de contraste.
C’est l’échec le plus courant qui soit. L’étude 2026 de WebAIM sur le million de pages d’accueil les plus visitées a relevé un texte à faible contraste sur 83,9 % d’entre elles, avec une moyenne de 34 occurrences par page.
“La plupart des palettes n’échouent pas. Ce sont certaines associations qui échouent.”
Ce que cela donne sur une vraie palette
Notre propre logo utilise six couleurs, une pour chaque langue de l’affichage en haut de notre page d’accueil. Sur fond blanc, le bleu mesure 6,16:1, le violet 5,72:1 et le rose 4,84:1 : ces trois couleurs pourraient donc porter le texte courant. L’orange mesure 4,30:1, le vert 4,38:1 et l’ambre 3,65:1. Ces trois-là échouent pour le petit texte et réussissent pour le grand texte.
Nous n’avons pas changé les couleurs. Nous avons changé leurs fonctions. Les six apparaissent en très grande taille et dans le logo. Tout le petit texte du site est presque noir ou gris foncé, à 7,23:1 ou mieux, y compris la petite légende placée juste au-dessus de l’affichage coloré. La marque garde sa couleur, et personne n’a à lire de l’ambre en 14 pixels.
Comment vérifier une palette
- Listez chaque association : chaque couleur de texte sur chaque fond où elle figurera, y compris les états de survol et le texte sur photographie.
- Marquez chaque association comme valable pour le texte courant, valable pour le grand texte seulement, ou en échec.
- À partir de ce tableau, donnez à chaque couleur une fonction : texte, affichage, remplissage ou décoration.
- Lorsqu’une couleur doit porter du petit texte, assombrissez-la légèrement au lieu de la remplacer. Les lecteurs reconnaissent la teinte, pas la valeur exacte.
- Repérez ce que la couleur est seule à indiquer, comme les liens, les erreurs et les lignes de graphique, et ajoutez un soulignement, une icône ou une étiquette.
Mettez-le par écrit
Une palette survit à la passation lorsque la charte indique ce que chaque couleur peut faire, et pas seulement sa valeur. Placez le tableau dans le guide de marque. La prochaine personne qui créera une page de campagne n’aura pas à le refaire, et la marque restera fidèle à elle-même.