Bonnes pratiques pour les palettes de couleurs en mode sombre

Le premier thème sombre que j'ai livré était, avec le recul, un désastre. J'ai pris notre interface claire, passé chaque couleur dans un filtre « inverser », ajusté quelques valeurs à la main, et appelé ça une nuit de travail. Ça rendait bien dans Figma. Puis les tickets de support sont arrivés : du texte qui « bourdonnait », des boutons de marque qui luisaient comme des bonbons radioactifs, des cartes qui se fondaient toutes en une seule feuille plate d'obscurité. La leçon a marqué. Une bonne palette de couleurs en mode sombre n'est pas une palette claire retournée comme un gant. C'est un problème de design à part entière, avec ses propres règles, et la plupart de ces règles vont à l'encontre de votre instinct.

Voici ce que j'aurais aimé qu'on me dise avant cette première tentative.

Le mode sombre n'est pas une inversion

Quand vous inversez un thème clair, toutes les relations qui le faisaient fonctionner se retrouvent brouillées. Du texte blanc sur un bouton bleu marine peut être parfait à 8:1 de contraste en mode clair ; inversez-le et vous risquez d'atterrir sur un bouton pâle avec du texte gris qui échoue totalement à l'accessibilité. Les ombres, qui portent une grande part de la profondeur dans les interfaces claires, disparaissent quasiment sur un fond sombre — une ombre noire à 10 % sur une surface quasi noire est invisible. Les couleurs saturées qui paraissent assurées et chaleureuses sur du blanc deviennent agressives et vibrantes sur du noir.

Le modèle mental que j'utilise est donc le suivant : un thème sombre est un ensemble distinct de décisions de design qui se trouve partager la même mise en page et la même marque. Vous re-résolvez le contraste, la hiérarchie, la profondeur et la couleur d'accent en repartant de zéro, sur une toile sombre. Si votre outillage vous permet de maintenir deux jeux de couleurs (les tokens sémantiques sont la manière propre de faire — j'en dis plus dans notre article sur les tokens de couleur des design systems), c'est le moment où ça paie.

Utilisez un gris foncé, pas du noir pur

C'est l'erreur la plus courante, et il vaut la peine de comprendre pourquoi le noir pur échoue plutôt que de se faire simplement dire de l'éviter.

Le noir pur (#000000) associé à du texte blanc pur (#FFFFFF) obtient techniquement un score de 21:1 — le rapport de contraste maximal possible. On pourrait croire que le contraste maximal est l'objectif. Ce n'est pas le cas. Cet écart de luminance extrême provoque de la halation : sur un fond sombre, la pupille se dilate pour laisser entrer plus de lumière, et le texte clair bave et s'étale sur ses bords. Pour les personnes astigmates — une large part de la population —, l'effet transforme les paragraphes en une bouillie luisante et fatigante. Les longues sessions de lecture deviennent réellement inconfortables.

Il y a un second problème, plus pratique. Si votre couche de base est #000000, vous n'avez plus aucune marge pour descendre. Vous ne pouvez pas rendre une surface plus sombre que le noir, donc tout sens de profondeur en retrait disparaît, et les ombres n'ont rien sur quoi tomber.

La solution est de partir d'un gris très foncé. Le Material Design de Google recommande #121212 comme surface sombre de référence, et après des années à concevoir ce genre de choses, je trouve que c'est proche de la perfection. C'est assez sombre pour se lire comme un « mode sombre », mais ça laisse de la marge dans les deux directions. Pour le texte, abandonnez le blanc pur au profit d'un blanc cassé dans la plage #E0E0E0 à #F2F2F2. Du blanc sur #121212 à ce niveau franchit encore confortablement les seuils WCAG tout en supprimant la lueur de halation.

Une palette neutre de départ que je sors souvent :

• Fond de base : #121212
• Texte principal : #E6E6E6 (forte emphase)
• Texte secondaire : #A8A8A8 (emphase moyenne, toujours bien au-dessus de 4,5:1)
• Texte désactivé / indication : environ #6E6E6E

Une astuce subtile : teintez très légèrement vos gris foncés vers votre teinte de marque au lieu d'utiliser des gris purement neutres. Une base de #131316 avec un soupçon de bleu, ou #14110F avec une touche de chaleur, donne une impression d'intention et de marque plutôt qu'un thème par défaut. Restez subtil — quelques points de saturation tout au plus.

Traduisez l'élévation par des surfaces plus claires, pas par des ombres

En mode clair, une carte flotte au-dessus de la page grâce à son ombre. En mode sombre, les ombres se remarquent à peine, alors on inverse la logique : plus une surface est haute, plus elle s'éclaircit. Une fenêtre modale est plus claire que la carte qu'elle recouvre, elle-même plus claire que la page derrière.

Material formalise cela par une superposition d'élévation — une couche blanche semi-transparente appliquée par-dessus la surface de base, devenant plus opaque à mesure que l'élévation augmente (de l'ordre de 0 % à la base jusqu'à environ 16 % au niveau le plus élevé). Vous n'êtes pas obligé d'implémenter le calcul littéral de la superposition ; vous pouvez simplement figer les résultats dans des tokens discrets. Une échelle que j'ai livrée et en laquelle j'ai confiance :

• Niveau 0 (page) : #121212
• Niveau 1 (cartes) : #1E1E1E
• Niveau 2 (menus, panneaux surélevés) : #242424
• Niveau 3 (boîtes de dialogue, modales) : #2C2C2C
• Niveau 4 (popovers, feuilles supérieures) : #333333

Chaque palier n'est que de quelques points plus clair, et cette retenue compte — les sauts doivent se ressentir, pas s'annoncer. Utilisée avec constance, cette approche donne à votre interface une vraie profondeur sans une seule ombre, et elle résout le reproche du « tout se fond ensemble » qui a plombé ma première tentative. Vous pouvez toujours superposer une légère ombre par-dessus pour une séparation supplémentaire, mais c'est le décalage de luminosité qui fait le gros du travail.

Désaturez vos couleurs d'accent

Prenez la couleur phare de votre marque — disons un bleu SaaS percutant comme #2563EB — et posez-la sur un fond #121212. Elle vibre. Les couleurs très saturées sur un champ sombre produisent un bourdonnement optique, et elles échouent souvent au contraste pour le texte ou les icônes, même quand elles paraissent éclatantes.

La solution est contre-intuitive : baissez la saturation et montez la luminosité. La recommandation de Material est d'utiliser des teintes plus claires (pensez à la plage 200–50 d'une échelle de couleur) et de les désaturer jusqu'à ce qu'elles dépassent 4,5:1 contre la surface sombre. En pratique, je désature les couleurs de marque d'environ 20 à 40 % pour le mode sombre et je les éclaircis, puis je vérifie le chiffre.

Concrètement, ce #2563EB pourrait devenir quelque chose comme #7AA2F7 en mode sombre — plus doux, plus clair et bien plus lisible contre la surface sombre. Votre accent en mode clair et votre accent en mode sombre sont des frères, pas la même valeur. C'est exactement ce genre d'exploration appariée clair/sombre pour laquelle le générateur de palettes de couleurs est conçu : choisissez votre teinte, puis ajustez la saturation et la luminosité tout en regardant le chiffre de contraste se mettre à jour en direct.

Quelques mises en garde honnêtes :

• Gardez les couleurs sémantiques reconnaissables. Le rouge d'erreur, le vert de succès et l'ambre d'avertissement doivent toujours se lire comme rouge, vert et ambre après désaturation. Éclaircissez et adoucissez, mais ne dérivez pas la teinte au point qu'une erreur cesse de ressembler à un danger.
• Les grands aplats de couleur diffèrent du texte. Une grande bannière phare saturée peut supporter plus de saturation qu'une petite étiquette, parce que vous ne demandez à personne de lire un texte fin dessus.
• N'appliquez pas de superposition d'élévation aux surfaces colorées. Un bouton de couleur primaire garde sa couleur à travers les niveaux d'élévation ; seules vos surfaces neutres s'éclaircissent en s'élevant.

Préservez le contraste WCAG — dans les deux sens

Les cibles d'accessibilité ne changent pas dans l'obscurité. WCAG 2.1 exige 4,5:1 pour le texte courant et 3:1 pour le grand texte (et pour les composants d'interface et icônes porteurs de sens). Ce qui change, c'est que les échecs sont plus sournois.

Le piège que je vois le plus souvent, c'est le texte gris moyen — quelque chose comme #888888 sur #121212 — qui paraît élégant et échoue discrètement pour le texte secondaire. Calculez toujours les chiffres réels. La référence officielle est le guide de contraste WCAG du W3C, et n'importe quel vérificateur de contraste (y compris celui intégré à notre générateur de palettes de couleurs) vous donnera le rapport en quelques secondes.

Deux choses à savoir pendant vos tests. Premièrement, « plus de contraste, c'est toujours mieux » est faux en mode sombre — le blanc pur maximise le chiffre mais déclenche la halation que j'ai décrite, donc vous optimisez pour une lisibilité confortable, pas pour le rapport le plus élevé possible. Deuxièmement, la prochaine génération de la norme, WCAG 3.0, remplace le simple rapport par APCA (l'Advanced Perceptual Contrast Algorithm), qui modélise la manière dont l'œil perçoit réellement le texte clair et sombre et gère bien mieux la polarité. C'est encore à l'état de brouillon, alors livrez avec WCAG 2.1 aujourd'hui, mais si vous voulez pérenniser votre travail, passez votre palette sombre dans un vérificateur APCA comme test de contrôle — il est nettement plus honnête sur les fonds sombres.

Testez-la là où les gens l'utilisent réellement

Une palette sombre peut passer tous les contrôles dans Figma et échouer quand même dans la vraie vie. La variable que j'ai le plus sous-estimée au début, c'est l'écran lui-même : les dalles OLED affichent #000000 comme des pixels véritablement éteints, au contraste brutal contre du texte éclairé, tandis que les LCD bon marché remontent les noirs et délavent vos paliers d'élévation soigneusement réglés. La palette qui paraît stratifiée sur votre moniteur peut sembler plate sur le portable d'entrée de gamme de quelqu'un.

Ma liste de tests, apprise à la dure :

• Regardez sur un vrai téléphone OLED à faible luminosité, la nuit. C'est là que la halation et la sursaturation se révèlent. Si c'est confortable ici, c'est confortable partout.
• Vérifiez les paliers d'élévation sur un LCD bon marché. Si vos cartes disparaissent dans le fond, vos paliers sont trop subtils.
• Basculez entre clair et sombre en direct. Des flashs de luminosité agressifs signifient généralement que votre base sombre est trop claire ou votre base claire trop grise.
• Regardez-la avec des images et du contenu utilisateur. De vraies photos, des avatars et des médias intégrés se posent sur vos surfaces et peuvent jurer d'une façon qu'une maquette propre ne montre jamais.
• Confirmez que les états de focus et les bordures survivent. Les subtiles bordures de 1px qui définissaient les champs en mode clair disparaissent souvent dans l'obscurité et ont besoin d'une valeur plus claire.

La version courte

S'il fallait tout comprimer en une poignée de gestes : partez de #121212, jamais de #000000. Utilisez du texte blanc cassé, pas du blanc pur. Montrez la profondeur en éclaircissant les surfaces surélevées, puisque les ombres n'existent quasiment pas ici. Désaturez et éclaircissez vos accents jusqu'à ce qu'ils cessent de bourdonner et commencent à passer le contraste. Tenez la ligne des 4,5:1 pour le texte courant, mais résistez à l'envie de chercher le maximum. Et testez sur un vrai écran OLED dans une pièce sombre, car c'est le seul environnement que vos maquettes ne pourront jamais simuler.

Bien fait, un thème sombre n'est pas seulement une option polie pour les couche-tard — c'est une version plus apaisée et plus concentrée de votre produit. Il suffit de le traiter comme le problème de design distinct qu'il est réellement.