Adapter les couleurs de marque au mode sombre

Une marque bleu marine profond — ≈oklch(0.38 0.14 265), ce bleu quasi-noir assuré qui ancrait chaque écran en mode clair — passe en thème sombre et disparaît. Sur une page quasi-noire (L ≈0,22), le bouton principal se détache désormais de son fond à ≈1,7:1, bien en dessous du plancher de 3:1 exigé pour les composants d’interface. La couleur qui était la marque se lit comme une ombre légèrement bleutée.

La solution n’est pas une nouvelle couleur de marque. En mode sombre, le travail de la couleur de marque est assuré par une marche différente de la même rampe — généralement une ou deux marches plus claires que le noyau du mode clair, prise dans une palette sombre dérivée avec sa propre courbe de luminosité et un renfort de chroma d’environ 20 %. La reconnaissance survit parce que ce sont la teinte et le rôle qui portent la marque, pas la coordonnée exacte. La façon dont cette dérivation opère sur l’ensemble de la palette fait l’objet de notre guide du mode sombre ; cet article porte spécifiquement sur la couleur de marque — remplissages, grandes surfaces et logos.

Pourquoi la valeur de marque canonique échoue-t-elle sur du quasi-noir ?

Parce qu’elle a été choisie sur fond blanc. Un noyau de marque est généralement réglé pour s’installer avec assurance sur des surfaces claires — assez sombre pour porter du texte blanc, assez saturé pour paraître vif sur une page pâle. Placez-le sur du quasi-noir et il peut échouer dans les deux sens.

Trop sombre pour se détacher. Le bleu marine ci-dessus est le cas extrême, mais même un noyau de luminosité moyenne peine : #2563eb — oklch(0.546 0.215 262.9) — se situe à ≈3,3:1 sur une page quasi-noire. Suffisant pour qu’un grand remplissage soit perçu, mais comme couleur de lien ou de texte il rate le plancher de 4,5:1 du texte courant qu’il franchissait aisément sur du blanc.

Trop terne pour se reconnaître. Les couleurs paraissent moins colorées sur un environnement sombre — l’effet perceptuel derrière le renfort de chroma de la rampe dérivée — si bien qu’une valeur qui se détache correctement peut tout de même paraître plate, une version plus grise de la marque. Les deux défaillances se cumulent : assombrir l’environnement atténue la couleur précisément au moment où elle dispose aussi de moins de contraste de luminosité sur lequel s’appuyer.

Quelle marche fait le travail de la marque en mode sombre ?

Une marche plus claire, tirée de la rampe que la marque possède déjà. La rampe existe précisément pour que la marque soit une famille de valeurs apparentées plutôt qu’une seule coordonnée ; en mode sombre, le rôle d’accent se repointe du noyau vers une marche une ou deux positions plus claire, et les valeurs proviennent de la rampe sombre dérivée — même couleur de départ, sa propre courbe de luminosité, chroma renforcé de ≈20 % pour contrer l’atténuation.

La raison pour laquelle cela ne coûte rien à la reconnaissance : la perception humaine des couleurs juge une couleur par rapport à son environnement, non comme des valeurs absolues — la constance chromatique du système visuel — si bien qu’un bleu plus clair et légèrement plus saturé dans le rôle de la marque sur une page sombre se lit comme le même bleu de marque. C’est la même logique de capital de marque sur laquelle reposent les refontes d’identité : la teinte plus le rôle portent l’identité ; la coordonnée exacte est négociable.

À quoi ressemblent les chiffres pour un vrai bleu de marque ?

Prenez #2563eb comme noyau du mode clair et dérivez la palette sombre à partir de la même couleur de départ. La marche d’accent de la rampe sombre atterrit autour de ≈oklch(0.70 0.14 262.9) — ≈#6F9CF5 — visiblement plus claire, et portant plus de chroma que la rampe claire n’en tient à cette luminosité (≈0,115 là ; le renfort de ≈20 % de la rampe sombre porte la demande à ≈0,14, toujours sous le plafond de gamut de ≈0,157 à cette luminosité et cette teinte).

Ouvrez cette couleur de départ avec sa rampe sombre dérivée dans Scale Composer — le noyau clair et la marche d’accent sombre marqués sur leurs propres courbes, le renfort de chroma visible dans les valeurs de la rampe sombre.

Qu’arrive-t-il aux boutons et à leurs libellés ?

Les deux dernières lignes du tableau sont la partie qui surprend les équipes : le libellé bascule. Le bouton du mode clair est un remplissage bleu moyen avec texte blanc — ≈5,2:1, confortablement lisible. La marche d’accent du mode sombre est assez claire pour que le texte blanc y tombe à ≈2,7:1 et échoue, tandis qu’un libellé quasi-noir passe à ≈6,4:1. Un remplissage qui portait du texte blanc dans un thème réclame du texte sombre dans l’autre.

C’est pourquoi les rôles onFill doivent être revérifiés par thème plutôt que supposés — Scale Composer les redérive avec le reste des rôles sémantiques, de sorte que le libellé de bouton du thème sombre est une valeur vérifiée, non une habitude héritée. Tout flux de travail qui transpose une palette à la main exige la même discipline : chaque paire remplissage-plus-libellé revérifiée du côté sombre.

Les grandes surfaces de marque survivent-elles à la traduction ?

Généralement pas telles quelles. Un hero de marque vif à fond perdu — la bande bleue saturée qui ouvre la page d’accueil en mode clair — tend à paraître oppressant sur un écran sombre : un champ large, lumineux et à fort chroma est exactement ce que l’environnement à faible luminance du mode sombre cherche à éviter. Le schéma qui se traduit bien est l’inversion de la quantité, pas de la couleur : des surfaces sombres teintées (un quasi-noir contenant la teinte de la marque) portant de petits accents vifs. La marque reste présente dans le sous-ton de la surface et concentrée dans les moments qui comptent — boutons, liens, mises en évidence — au lieu d’être étalée sur toute la zone.

Et le logo ?

Les logos sont des ressources, pas des tokens : un pipeline de tokens peut redériver un rôle de couleur, mais il ne peut pas repeindre l’intérieur d’un SVG ni une marque matricielle. La réponse honnête en une ligne consiste à livrer une ressource en variante sombre — même marque, remplissages ajustés — et à la basculer avec le thème, de la même façon que les valeurs basculent.

Testez le basculement sur votre propre marque

Le basculement du libellé est la vérification la plus utile à faire avant la mise en production. Lancez le test sur fond de remplissage sur la marche d’accent sombre — la rampe sombre dérivée de votre couleur de départ, l’appariement remplissage-et-libellé de l’accent revérifié pour le thème sombre, pour que le bouton qui fonctionne à midi en mode clair fonctionne encore à minuit en mode sombre.