Pourquoi les couleurs paraissent plus ternes en mode sombre (et la correction à 20 %)

Voici une expérience de trente secondes. Prenez un bleu de marque — #2563eb, soit oklch(0.546 0.215 262.9) — et placez-en deux échantillons côte à côte : l’un sur une carte blanche, l’autre sur une carte quasi noire. Même hex, mêmes pixels, même écran. L’échantillon sur la carte sombre paraît plus discret — un peu moins coloré, un peu fatigué — alors qu’un sélecteur de couleur jurera que les deux sont identiques. Rien n’a changé dans la couleur. Seul son environnement a changé.

Les couleurs paraissent délavées en mode sombre parce que le système visuel juge la coloration par rapport à l’environnement, et non dans l’absolu : sur un fond sombre, une valeur de chroma identique paraît nettement moins vive. La correction consiste à augmenter le chroma, pas la luminosité — les palettes sombres dérivées augmentent le chroma d’environ 20 % pour que les couleurs sur fond quasi noir paraissent aussi vives que leurs équivalents en mode clair sur fond blanc. C’est le mécanisme perceptuel qui sous-tend une grande partie de ce que couvre notre guide du mode sombre ; cet article explique pourquoi cela se produit, pourquoi les équipes corrigent régulièrement le mauvais axe, et à quoi ressemblent les chiffres.

Pourquoi la même couleur paraît-elle moins colorée sur un fond sombre ?

Parce que l’œil est un instrument relatif, pas un colorimètre. Deux effets issus de la recherche sur la perception suffisent à expliquer l’expérience ci-dessus, et il vaut la peine de connaître les deux sous une forme accessible.

Le premier est le contraste simultané — l’observation générale selon laquelle un stimulus est perçu par rapport à ce qui l’entoure, la même famille d’effets que l’effet de contraste dans la perception en général. Une plage de couleur bordée de blanc vif est comparée, en continu, à quelque chose qui n’a aucune couleur et une lumière maximale ; la même plage bordée de quasi noir est comparée à quelque chose qui n’a aucune couleur et presque aucune lumière. La comparaison modifie ce qui est perçu, et l’une des victimes est la coloration : sur un fond sombre, la couleur de la plage paraît moins saturée qu’elle ne le mesure.

Le second est l’adaptation. Dans une interface sombre, l’œil s’ajuste à un niveau global de lumière plus faible, et une partie du fonctionnement de l’apparence colorée fait que la coloration perçue tend à diminuer à mesure que le niveau de lumière baisse — une scène au crépuscule paraît plus grise que la même scène à midi, même si les surfaces qu’elle contient n’ont pas changé. Un thème sombre est un petit crépuscule auto-infligé.

Aucun de ces deux effets n’est un artefact d’affichage, et aucun ne peut être désactivé. Un thème sombre qui veut que ses couleurs paraissent identiques à celles du thème clair doit les compenser.

Pourquoi les équipes corrigent-elles le mauvais axe ?

Le problème s’annonce généralement par une plainte vague : la couleur de marque paraît fatiguée en mode sombre. La correction instinctive consiste à l’éclaircir — et l’éclaircir fait bien ressortir davantage la couleur, car cela augmente le contraste de luminance entre la couleur et le fond sombre. C’est ce qui rend l’instinct si tenace : l’ajustement produit une amélioration visible, mais sur le mauvais axe.

Mais ce qui s’est estompé, ce n’était pas la luminosité — c’était la coloration, et ce sont des dimensions différentes. Éclaircir une couleur chromatique sans toucher à son chroma la pousse vers le pastel : le bleu du mode sombre devient un bleu plus pâle, plus laiteux, qui ne correspond plus au caractère de la marque, et si chaque accent reçoit le même traitement, tout le thème sombre dérive vers le bonbon. La couleur n’a jamais été trop sombre. Elle était insuffisamment colorée pour son nouvel environnement, et l’axe qui la restaure est le chroma.

Quelle doit être l’ampleur de la hausse — et qu’est-ce qui la limite ?

Dans les palettes sombres dérivées, le chiffre de travail est une hausse de chroma d’environ 20 %. Le bleu de marque qui tourne à C 0,215 en clair demande ≈ C 0,26 en sombre pour paraître tout aussi vif. Le qualificatif est important : demande. La hausse est une requête, et le gamut sRGB a un plafond à chaque niveau de luminosité — certaines couleurs en sont assez proches pour ne pas pouvoir absorber la totalité des 20 %.

Trois échantillons rendent le schéma concret. Chaque ligne montre la couleur telle qu’elle est livrée en clair, et sa version boostée en mode sombre :

Le vert et l’ambre absorbent la totalité des 20 %. Le bleu, non : à L 0,546 et une teinte de 262,9°, le sRGB manque de place autour de C ≈ 0,25, si bien que le bleu boosté atterrit sur le plafond plutôt que sur la requête. C’est la limite honnête de la technique — une couleur de départ choisie près du bord du gamut ne laisse que peu de marge pour le mode sombre, ce qu’il vaut mieux savoir le jour où la couleur de départ est choisie, pas le jour où le thème sombre est construit.

Ouvrez la comparaison sur deux fonds dans Scale Composer — les trois mêmes échantillons au chroma identique sur une surface blanche et une surface quasi noire, pour que l’affadissement soit visible avant toute correction.

Quelles couleurs reçoivent la hausse ?

Pas toutes, et pas de manière uniforme.

Rampes de marque et d’accent : oui. Ce sont les couleurs dont l’éclat est la mission — boutons, liens, surbrillances, badges. Elles absorbent la totalité de la hausse, dans les limites du gamut — une étape du travail plus large qu’est l’adaptation d’une couleur de marque au mode sombre.

Neutres : à peine, et proportionnellement. Une échelle de neutres teintés tourne à un chroma murmuré — des valeurs comme C 0,02 — et la hausse est proportionnelle à la valeur, si bien qu’elle devient ≈ 0,024. C’est invisible dans un échantillon et toujours en deçà de ce que la plupart des yeux appelleraient « une couleur », et c’est là tout l’intérêt : la hausse préserve la température du neutre sur le fond sombre sans transformer le décor en acteur.

Couleurs fonctionnelles : oui, puis nouvelle vérification. Les verts de succès, les ambres d’avertissement et les rouges d’erreur s’affadissent comme tout le reste et ont besoin de la hausse comme tout le reste — mais ils portent aussi des obligations de contraste, et modifier le chroma déplace légèrement le contraste mesuré d’une couleur. Une palette dérivée revérifie les seuils de contraste sur les surfaces sombres après la hausse, plutôt que de supposer que les validations du thème clair se reportent ; dans Scale Composer, les rôles sombres sont re-dérivés avec les seuils WCAG, et l’APCA est vérifié sur les surfaces sombres.

Voir la correction s’activer et se désactiver

La hausse s’évalue plus facilement en avant/après qu’en chiffre. Activez ou désactivez la hausse de chroma sur la palette sombre — les mêmes rampes rendues sur fond quasi noir avec la hausse désactivée, puis activée, pour que vous puissiez voir délavé et tout aussi vif échanger leurs places sur votre propre écran.