Comment créer une palette accessible à partir d'une seule couleur de marque

La plupart des chartes graphiques vous livrent un code hex et un logo. En tirer de quoi construire une interface est un travail méthodique, et c’est en le faisant à l’œil que les problèmes d’accessibilité s’installent durablement.

Étape 1 : trouver la teinte

Convertissez la couleur de marque en OKLCH et notez l’angle de teinte. Ce nombre, c’est la marque. Tout le reste peut s’ajuster.

#2563eb  →  oklch(54.6% 0.215 262.9)

La teinte 262.9 est désormais fixée pour toute l’échelle. La luminosité et la chroma sont les variables.

Étape 2 : construire l’échelle

Dix paliers, régulièrement espacés en luminosité, avec une chroma qui culmine au milieu et diminue aux deux extrémités. Les couleurs très claires et très sombres ne peuvent pas garder une chroma élevée sans sortir de la plage affichable.

--brand-50:  oklch(97% 0.015 263);
--brand-100: oklch(93% 0.035 263);
--brand-200: oklch(87% 0.070 263);
--brand-300: oklch(79% 0.120 263);
--brand-400: oklch(67% 0.180 263);
--brand-500: oklch(55% 0.215 263);  /* the original */
--brand-600: oklch(48% 0.200 263);
--brand-700: oklch(40% 0.165 263);
--brand-800: oklch(31% 0.120 263);
--brand-900: oklch(22% 0.075 263);

Comme la luminosité OKLCH est perceptuellement uniforme, ces paliers paraissent réguliers. Le même exercice en HSL donne une échelle qui se tasse au milieu et fait des sauts aux extrémités.

Étape 3 : attribuer les rôles par la mesure, pas à l’œil

C’est l’étape qui décide si le système est accessible, et c’est aussi celle qu’on fait le plus souvent au jugé.

Ne choisissez pas « la plus jolie » pour le texte. Partez de l’exigence de contraste et remontez :

Rôle	Exigence	Palier habituel
Texte courant sur blanc	4.5:1	600–700
Grand texte sur blanc	3:1	500–600
Fond de bouton avec libellé blanc	4.5:1 pour le libellé	600
Bordures et séparateurs	3:1 s’ils portent un sens	400 (le 300 mesure 1.95:1 sur blanc, donc décoratif uniquement)
Fonds discrets	aucune	50–100

Ce qu’il faut en retenir : votre couleur de marque n’est généralement pas votre couleur de texte. Un 500 vif est conçu pour être vu en grand, sur un logo. Utilisé pour du texte courant en 16px, il manquera le plus souvent le seuil de 4.5:1. C’est le palier 600 ou 700 qui convient au texte courant, et il reste reconnaissable comme votre bleu.

Étape 4 : générer les variantes du mode sombre

Ne partez pas du principe que l’échelle s’inverse. Ce n’est pas le cas, pour deux raisons.

La formule de WCAG 2 ajoute une constante fixe de reflet (flare) qui domine du côté sombre : des paires sombres peuvent afficher des ratios conformes tout en paraissant ternes à la lecture. Et les couleurs très saturées vibrent sur fond sombre, ce qu’elles ne font pas sur fond blanc.

Chaque rôle sémantique a donc besoin d’une seconde valeur, plus claire et généralement moins saturée :

:root {
  --text-brand: var(--brand-700);
  --surface-brand: var(--brand-50);
  --border-brand: var(--brand-400);
}

:root[data-theme='dark'] {
  --text-brand: var(--brand-300);
  --surface-brand: var(--brand-900);
  --border-brand: var(--brand-700);
}

Même échelle, paliers différents. C’est pour cela que construire l’échelle d’abord est rentable : le mode sombre devient une simple réaffectation, et non un second exercice de conception.

Étape 5 : nommer selon le rôle, pas selon la valeur

--brand-600 est une valeur. --text-brand est un rôle. Les composants doivent faire référence aux rôles.

La raison est pratique : quand la couleur de marque change, et elle changera, vous régénérez l’échelle et les rôles continuent de pointer vers les bons paliers. Si les composants référencent directement --brand-600, il faut les reprendre un par un.

C’est aussi ce qui rend la gestion des thèmes possible. Un rôle peut pointer vers des paliers différents selon le thème. Une valeur brute, non.

Étape 6 : vérifier les paires, pas seulement l’échelle

Une échelle qui passe le contraste peut encore échouer à l’usage. Deux points à vérifier :

Chaque combinaison texte sur surface que vous livrez réellement. Pas toutes les paires possibles, seulement celles qui figurent dans l’interface : texte courant sur le fond de page, texte courant sur une carte, lien sur une carte, libellé de bouton sur le bouton.

Si deux couleurs se confondent pour les personnes daltoniennes. Si votre système comporte un second accent, par exemple un vert de succès à côté du bleu de marque, vérifiez précisément cette paire. La vérification du contraste compare le premier plan à l’arrière-plan, jamais un premier plan à un autre : cet échec passe donc tous les audits de ratio.

La version la plus courte

Gardez la teinte. Échelonnez la luminosité. Réduisez la chroma aux extrémités. Attribuez les rôles par la mesure plutôt qu’à l’œil. Générez des variantes sombres au lieu d’inverser. Nommez selon le rôle.

Six étapes, et une seule couleur de marque vous donne un système conforme dans les deux thèmes, sans avoir à négocier avec la charte graphique.

Notre vérificateur de contraste se charge de la partie mesure : donnez-lui une paire de couleurs et il affiche le ratio, la valeur APCA à votre taille et à votre graisse réelles, et la couleur conforme la plus proche si la paire échoue.