Corriger le contraste des couleurs sans changer la couleur de votre marque

Chaque audit d’accessibilité produit le même moment de gêne. Le bleu de la marque échoue sur fond blanc, le vérificateur affiche 3.02:1, et le conseil proposé est de « choisir une couleur accessible ». Personne ayant assisté à cette réunion n’a jamais trouvé ce conseil utile. La couleur est dans le logo. Elle est dans la présentation. Elle a été validée par quelqu’un qui n’est pas dans la salle.

La bonne nouvelle, c’est que ce conseil est faux, ou du moins très incomplet. Dans la plupart des cas, vous pouvez garder la couleur.

Le contraste se soucie à peine de la teinte

Un rapport de contraste compare des luminances relatives, c’est-à-dire, en gros, la quantité de lumière qu’émet une couleur. La luminance dépend massivement de la luminosité. La teinte y contribue un peu, parce que l’œil est plus sensible au vert qu’au bleu, et la saturation presque pas.

La conséquence pratique mérite d’être dite clairement : vous pouvez changer la clarté d’une couleur sans changer la couleur elle-même. Un bleu plus foncé reste reconnaissable comme votre bleu. Il porte la même association à la marque, appartient à la même famille et s’accorde avec les mêmes couleurs secondaires. Ce qu’il ne fait pas, c’est échouer à votre audit.

Voilà pourquoi « choisissez une autre couleur » est un si mauvais conseil. Il traite la couleur comme un bloc indivisible, alors qu’elle a en réalité une propriété qui compte pour le contraste et deux qui comptent pour l’identité.

Travaillez en OKLCH, pas en hex

Si vous ajustez une valeur hex à la main, vous modifierez la teinte et la saturation sans le vouloir. L’hex est un format de stockage, pas un espace utile pour raisonner sur la couleur.

OKLCH sépare proprement les trois propriétés :

• L : la luminosité, de 0 à 100 %. C’est elle qui fait bouger le contraste.
• C : la chroma, à peu près la saturation.
• H : la teinte, de 0 à 360°. C’est elle qui porte votre marque.

Gardez H, gardez C autant que possible, et faites varier L. Comme la luminosité OKLCH est perceptuellement uniforme (contrairement au HSL, où 50 % de luminosité ne signifie pas la même chose pour le jaune et pour le bleu), des pas égaux en L paraissent égaux à l’œil. L’ajustement devient prévisible.

Le CSS accepte directement l’OKLCH, vous pouvez donc livrer le résultat sans reconvertir :

--brand: oklch(68% 0.14 240);      /* fails on white */
--brand-text: oklch(52% 0.14 240); /* same hue, passes AA */

Deux propriétés personnalisées, une seule teinte. La couleur de la marque reste la couleur de la marque et gagne une variante sûre pour le texte.

Jusqu’où il faut aller

Moins loin qu’on ne le croit. Passer de 3:1 à 4.5:1 sur fond blanc demande en général un changement de luminosité de l’ordre de 8–15 %, selon la teinte. Le changement est visible si vous mettez les deux côte à côte, et quasiment invisible sinon.

Il existe une vraie limite, et mieux vaut savoir où elle se trouve. Les couleurs chaudes très saturées (jaune, orange, vert clair) plafonnent bas sur fond blanc, parce qu’elles sont intrinsèquement claires. Un jaune saturé ne peut atteindre 4.5:1 sur blanc à aucune luminosité tout en restant un jaune saturé. Quand vous touchez ce mur, les options honnêtes sont de réduire la chroma ou de changer plutôt le fond.

Changer le fond est souvent le moindre compromis

C’est une option trop peu utilisée. Quand la couleur de la marque est celle du texte, la contrainte, c’est la couleur de la marque. Quand c’est celle du fond, vous avez deux éléments à faire varier, et le texte est généralement le moins précieux des deux.

Un bouton au fond aux couleurs de la marque, avec un texte blanc qui échoue, se corrige souvent mieux en fonçant légèrement le fond qu’en renonçant au texte blanc. La plupart des outils ne l’évoquent jamais, parce qu’ils sont conçus pour évaluer une paire, pas pour la résoudre.

Vérifiez le résultat à la taille réellement utilisée

Le WCAG 2 compare deux couleurs et ignore tout le reste. Une légende de 12px en Light et un titre de 32px en Bold obtiennent donc le même score, et quiconque a mis en ligne une légende techniquement conforme sait que la lecture ne fonctionne pas ainsi.

L’APCA, l’algorithme candidat pour le WCAG 3, note la taille et la graisse en plus de la couleur. Il produit des résultats franchement dérangeants. Un texte de 14px en graisse normale ne peut passer à aucun contraste, pas même en noir pur sur blanc pur. Il lui faut 16px, ou du gras. Le WCAG 2 laissera passer cette légende sans sourciller.

Aucun des deux chiffres ne suffit seul. Le WCAG 2 est la référence de conformité aujourd’hui. L’APCA prédit mieux si une personne peut lire le texte. Quand ils divergent, alignez-vous sur le plus strict.

Le mode sombre mérite son propre passage

Ne supposez pas qu’une palette qui passe sur blanc passera une fois inversée. La formule du WCAG 2 ajoute une constante fixe de halo lumineux qui domine dans les tons sombres : des paires proches du noir peuvent afficher un rapport confortablement conforme et paraître pourtant ternes et boueuses. C’est l’un des défauts précis que l’APCA a été conçu pour corriger.

En pratique, une couleur de marque a généralement besoin de deux variantes : une assombrie pour les fonds clairs, une éclaircie pour les fonds sombres. Même teinte, même chroma, deux valeurs de luminosité. C’est un système de couleurs plutôt qu’une couleur, et c’est ce qu’exige réellement une mise en ligne dans les deux thèmes.

En bref

1. Gardez la teinte. Faites varier la luminosité.
2. Travaillez en OKLCH pour ne modifier que ce que vous vouliez modifier.
3. Si la couleur sert de fond, envisagez de la déplacer elle plutôt que le texte posé dessus.
4. Vérifiez à la taille et à la graisse réelles, pas seulement sur deux pastilles.
5. Générez une seconde variante pour le mode sombre au lieu de supposer que la première s’inverse.

Le contrast checker fait les cinq. Il trace l’axe de luminosité de votre propre teinte, montre quelles portions passent et vous donne la valeur conforme la plus proche, classée selon le moindre déplacement de la couleur.