Des palettes de couleurs pour le mode sombre qui tiennent la route

Presque jamais, et il est utile d'en comprendre les raisons par les chiffres plutôt que par une règle empirique. Voici les arrière-plans sombres et les surfaces de cartes de cinq palettes distinctes en production, en HSL :

Trois modèles, tous cohérents, aucun n'est le fruit du hasard.

• Rien n'est à 0 % de luminosité. La valeur la plus sombre est à 8 %. Le noir pur est la seule valeur qui ne laisse aucune marge de manœuvre en dessous. Dès que vous avez besoin d'une surface *sous* l'arrière-plan, vous êtes bloqué.
• Les cartes sont plus claires que l'arrière-plan, de 3 à 5 points. Dans les interfaces sombres, l'élévation se traduit par une luminosité accrue. Cela inverse l'instinct du mode clair, où une carte est souvent l'élément le plus clair posé sur une page teintée.
• Un seul des cinq est un vrai gris. Les autres portent une teinte (30, 222, 128, 36), généralement orientée vers la couleur d'accentuation. Un neutre sombre teinté paraît travaillé ; un neutre sans teinte paraît être un choix par défaut, car c'est le défaut.

Le moyen le plus rapide d'obtenir un mauvais mode sombre est d'inverser la luminosité de chaque valeur du mode clair. Quatre éléments spécifiques s'en trouvent brisés, approximativement dans cet ordre :

1. Les ombres ne fonctionnent plus. Une ombre est une zone d'obscurité projetée sur une surface plus claire. Sur une surface sombre, il n'y a plus rien à assombrir ; tous vos indices d'élévation disparaissent silencieusement et l'interface s'aplatit.
2. L'accent manque de contraste. Une couleur de marque saturée et moyenne, parfaitement lisible sur blanc, est souvent trop sombre sur un fond presque noir. L'inversion des neutres ne l'affecte pas, elle échoue donc discrètement plutôt qu'évidemment.
3. Les bordures disparaissent ou deviennent criardes. Une bordure en mode clair est une ligne légèrement plus sombre. Inversée, elle devient une ligne légèrement plus claire, qui soit disparaît contre la carte, soit brille contre l'arrière-plan, selon la surface sur laquelle elle se trouve.
4. Les états désactivés et atténués s'effondrent. En mode clair, ce sont des gris plus clairs. Inversés, ils deviennent des gris foncés sur un fond sombre, et l'état « atténué » devient « invisible ».

Puisque les ombres sont inutilisables, les interfaces sombres expriment la profondeur via la luminosité des surfaces. C'est précisément le rôle de l'écart entre l'arrière-plan et la carte dans le tableau ci-dessus : chaque niveau supérieur dans la pile est un niveau de luminosité supérieur.

Vous avez besoin d'au moins trois niveaux, et il vaut mieux les nommer plutôt que d'improviser : l'arrière-plan de la page, une surface surélevée (cartes, panneaux) et une surface de superposition (popovers, menus déroulants, dialogues) qui surplombe les deux autres. Un espacement de 3 à 5 points de luminosité permet de garder des limites lisibles sans transformer l'écran en zébrure. En dessous de 3 points, les niveaux ne sont plus distinguables à une luminosité normale ; bien au-dessus de 6, la surface supérieure commence à ressembler à un panneau de mode clair parachuté là.

Regardez à nouveau les couleurs primaires de ces mêmes cinq kits : 12 71% 46%, 46 85% 60%, 225 63% 80%, 114 47% 50%, 23 92% 60%. Toutes sont des teintes claires ou moyennes. Aucune n'est une version sombre et saturée de la teinte, car une couleur sombre et saturée sur une surface presque noire est à la fois difficile à lire et fatigante pour les yeux.

La règle générale est qu'un accent de mode clair doit être éclairci et généralement désaturé pour le mode sombre. L'éclaircissement apporte le contraste ; la désaturation empêche la couleur de « vibrer » contre le neutre sombre, un effet qui rend certains thèmes sombres physiquement épuisants. De plus, l'accent nécessite sa propre décision de premier plan : une couleur assez claire pour être lisible sur fond sombre est souvent assez claire pour nécessiter un texte *sombre* par-dessus, ce qui est l'inverse du couple utilisé en mode clair.

Vérifiez les deux directions par rapport à un objectif de contraste. Le texte du corps sur l'arrière-plan est évident ; les deux points souvent oubliés sont le texte atténué sur une carte, et le premier plan de l'accent sur l'accent lui-même.

C'est là que la plupart des galeries de palettes vous abandonnent. Une rangée de cinq codes hexadécimaux vous donne l'ambiance, mais ne répond à presque aucune des questions qu'un écran réel pose : quelle est la couleur d'une bordure sur une carte, à quoi ressemble le texte atténué sur une superposition, quel aspect a un bouton destructif lorsqu'il est désactivé, quelle est la couleur de l'anneau d'un champ de saisie focalisé.

La liste des rôles est la même dans les deux modes, et c'est là tout l'intérêt : background, foreground, card, card-foreground, popover, popover-foreground, muted, muted-foreground, primary, primary-foreground, secondary, accent, destructive, border, input, ring, plus les séries de graphiques. Définissez-les une fois par mode et chaque composant se résout sans intervention manuelle. Si vous les ignorez, chaque nouvel écran devra faire un nouveau choix, et différemment. La liste complète et l'utilité de chaque rôle se trouvent dans explications sur les design tokens de couleurs sémantiques.

Tout ce qui précède est une règle. Voici quatre ensembles sombres qui s'y conforment, choisis parce qu'ils résolvent le même problème de manières visiblement différentes. Observez le couple background et card dans chacun d'eux : cet écart constitue le modèle d'élévation, et c'est la décision qui détermine le plus si une UI sombre paraît conçue ou simplement inversée.

Les interfaces sont de plus en plus conçues par des agents de code s'appuyant sur un brief écrit, et le mode sombre est l'élément le plus fréquemment oublié dans ces briefs. Nous avons analysé 299 fichiers DESIGN.md publics — le fichier qu'un agent de code lit avant de générer l'UI — pour mesurer leur couverture.

La conséquence est prévisible. Si on lui demande une variante sombre sans instructions écrites, l'agent inverse les gris. C'est précisément l'erreur qui brise les quatre points listés précédemment. Le résultat semble plausible sur le premier écran, mais devient incohérent dès le cinquième. Comme chaque écran pris isolément semble correct, personne ne s'en aperçoit avant que l'application entière ne soit construite.

1. 1

   Superposez trois surfaces

   Placez un overlay sur une carte, elle-même sur l'arrière-plan, avec une bordure d'un pixel sur chaque élément. Si une limite disparaît, vos paliers de luminosité sont trop proches ou votre rôle de bordure remplit une double fonction.

2. 2

   Affichez du texte atténué sur chaque surface

   Pas seulement sur l'arrière-plan. C'est sur le texte atténué d'une carte que les palettes inversées échouent généralement, et c'est l'état de texte le plus courant dans une interface dense.

3. 3

   Créez une confirmation d'action destructive

   Cela permet de tester simultanément la couleur destructive, son premier plan, son état de survol et sa bordure : le groupe de rôles que l'on définit en dernier, mais que l'on utilise en premier.

4. 4

   Testez le focus

   Utilisez la touche Tab pour atteindre un champ de saisie. L'anneau de focus est une couleur que personne ne choisit délibérément ; c'est donc soit votre couleur d'accentuation qui remplit un rôle pour lequel elle est inadaptée, soit un défaut du navigateur que personne n'a souhaité.

5. 5

   Examinez un tableau dense

   L'exercice le plus difficile pour une palette sombre est d'aligner trois gris côte à côte. Une palette qui survit à un tableau de paramètres survivra sans effort à une page marketing ; l'inverse n'est pas vrai.

• Partir d'un noir pur. Cela supprime le niveau inférieur à votre arrière-plan avant même que vous ne réalisiez que vous en avez besoin.
• Réutiliser la couleur d'accentuation du mode clair sans modification. Elle doit généralement être éclaircie, souvent désaturée, et peut nécessiter un texte sombre en premier plan.
• Conserver les ombres tout en ajoutant des paliers de luminosité. Choisissez un seul langage d'élévation. Combiner les deux donne aux surfaces surélevées un aspect flou ou taché.
• Ne définir que les besoins du premier écran. Les rôles que vous oubliez sont ceux que l'écran suivant inventera, et il les inventera différemment.
• Tester sur une page marketing. Les sections Hero flattent toutes les palettes. Testez sur l'écran le plus dense de votre interface.