L’élévation en mode sombre : plus clair signifie plus proche

En mode sombre, l’élévation est signalée par la luminosité plutôt que par l’ombre : plus une surface est haute, plus elle est claire. Le plancher de la page est la valeur la plus sombre du thème ; les cartes, les éléments surélevés et les superpositions s’éclaircissent progressivement au-dessus, les boîtes de dialogue étant les plus claires de toutes. Le principe du mode clair, « surélevé signifie ombre en dessous », se perçoit à peine sur un fond sombre : les thèmes sombres inversent donc le canal — et cette inversion transforme l’élévation d’une décoration en un système : une échelle de valeurs de surface proches du noir qu’il faut budgéter, espacer et vérifier comme n’importe quelle autre échelle.

Cet article couvre le mécanisme — pourquoi les ombres échouent, à quoi ressemble l’échelle en chiffres, et où ses paliers commencent à s’encombrer. Il présuppose le cadrage de notre guide du mode sombre. Un thème sombre est une palette dérivée avec ses propres règles, pas un thème clair recoloré.

Pourquoi les ombres ne signalent-elles pas la hauteur sur les surfaces sombres ?

Une ombre fonctionne en étant plus sombre que ce qui l’entoure. Sur une page blanche, il y a énormément de place sous la valeur de surface — une carte située en haut de la plage de luminosité peut projeter une ombre grise douce plusieurs paliers plus sombre, et l’œil perçoit la différence instantanément. Sur une page presque noire, cette place a disparu : le fond se trouve près du bas de la plage, et une ombre qui s’y projette est sombre-sur-sombre, un signal qui n’a presque aucune place pour exister. L’ombre est toujours dessinée ; elle n’a simplement rien à dire.

Les thèmes sombres recrutent donc le canal opposé. La convention — popularisée par le système d’élévation de Material, qui superpose aux surfaces sombres surélevées des quantités croissantes de blanc — veut que les surfaces s’éclaircissent à mesure qu’elles s’élèvent. L’intuition physique tient : dans une pièce sombre, ce qui se trouve plus près de la source lumineuse en capte davantage. Plus clair se lit comme plus proche, et l’œil accepte cette grammaire sans qu’on la lui enseigne.

À quoi ressemble une échelle d’élévation sombre en chiffres ?

En tant que système, l’inversion signifie qu’un thème sombre a besoin de ce que les thèmes clairs obtiennent presque gratuitement grâce aux ombres : une échelle explicite de valeurs de surface. Voici une échelle à quatre niveaux construite au-dessus d’un point d’ancrage teinté par la marque — un chroma à peine perceptible de 0,02 à la teinte du bleu de marque #2563eb :

L’arithmétique, c’est le design. Quatre niveaux couvrant ≈ 0,12 de luminosité, cela donne trois écarts de ≈ 0,04 chacun — confortablement le double du seuil de ≈ 0,02 à partir duquel deux surfaces sombres deviennent difficiles à distinguer. Chaque niveau se distingue de son voisin, et l’ensemble de la pile reste en dessous du point où une surface cesse de se lire comme sombre.

Ouvrez cette échelle dans Scale Composer — les quatre niveaux de surface empilés au-dessus du point d’ancrage, avec l’écart de luminosité entre chaque paire mesuré et affiché par rapport au seuil de 0,02.

Combien de niveaux d’élévation un thème sombre peut-il contenir ?

Moins que vous ne le souhaiteriez, et l’arithmétique explique pourquoi. L’échelle vit dans une bande étroite : elle commence au point d’ancrage de la page (≈ 0,13–0,18) et devrait plafonner tant que la surface la plus haute se lit encore comme une surface sombre plutôt que grise — en pratique pas très au-dessus de L ≈ 0,3. Appelons l’étendue utilisable ≈ 0,12.

Quatre niveaux sur cette étendue donnaient des écarts de ≈ 0,04. Passez à six niveaux et la même étendue se divise en cinq écarts de ≈ 0,024 — frôlant la différence à peine perceptible de ≈ 0,02, le point où les surfaces adjacentes se fondent en une même valeur et où l’histoire de l’élévation devient impossible à raconter. C’est là que les palettes sombres générées ont besoin d’instrumentation : Scale Composer avertit lorsque deux paliers tombent à moins de 0,02 L l’un de l’autre, et une pile de surfaces sombres est l’endroit le plus courant pour le déclencher.

L’échappatoire tentante — élargir l’étendue au lieu de resserrer les écarts — échange une défaillance contre une autre : une boîte de dialogue à L ≈ 0,35 se sépare nettement de tout ce qui est en dessous, mais elle tend à se lire comme un panneau gris clair de passage dans un thème sombre plutôt que comme la surface la plus haute du thème lui-même. La conclusion honnête, c’est que les niveaux d’élévation en mode sombre constituent un budget. Les dépenser sur des niveaux que les utilisateurs peuvent réellement distinguer vaut mieux qu’une échelle à six barreaux que personne ne peut lire.

Les ombres et les bordures ont-elles encore un rôle ?

Les deux — l’inversion rétrograde les ombres, elle ne les licencie pas.

Aux élévations les plus hautes, une ombre douce associée au palier de luminosité mérite toujours sa place : une boîte de dialogue flottant au-dessus d’une mise en page chargée gagne à avoir un contour qui la sépare de ce qu’elle recouvre, et à cette hauteur, il y a enfin quelque chose en dessous d’elle d’assez clair pour qu’une ombre s’y détache. Le schéma à éviter, ce sont les ombres à la place des paliers de luminosité, pas les ombres en plus d’eux.

Les bordures filiformes sont l’autre repère légitime. Une bordure d’un pixel à une valeur légèrement plus claire marque la limite d’une surface sans dépenser la moindre part du budget de luminosité — les langages de design plat s’appuient là-dessus, et c’est plus économique et plus net qu’un palier d’échelle, au prix de l’atmosphère : les bordures dessinent une carte de l’élévation plutôt que de créer la profondeur elle-même. Beaucoup de thèmes sombres mélangent les deux — des paliers d’échelle pour la pile principale, des bordures là où des niveaux doivent s’imbriquer les uns dans les autres.

Mettez votre propre échelle à l’épreuve

L’arithmétique du budget est plus convaincante quand ce sont vos surfaces qui s’encombrent. Poussez une échelle d’élévation sombre jusqu’à six niveaux — ajoutez des barreaux et regardez les écarts se resserrer vers le seuil de 0,02 jusqu’à ce que l’avertissement se déclenche, puis décidez de combien de niveaux votre thème a réellement besoin.