Dark mode requires rebuilding the luminance hierarchy in reverse

What it is

In light theme the title is near-black grey, captions mid-grey, background near-white: more important means darker, against paper. Invert the values and the title is near-white, captions mid-grey, background near-black. It looks like “more important means lighter,” but mid-grey captions on near-black often match or beat the title’s contrast, so secondary copy suddenly shares a level with primary. Dark mode is not the light ladder stuck on upside down. It is a new ground, and a new answer to “what jumps more than the ground.” Inverting is cheap to produce and expensive to perceive.

Why it happens

Light-theme hierarchy is written as ink against paper: the most important object takes the largest darkening budget. Dark-theme ground is already near black, so that budget is gone; hierarchy is rewritten as light against night: the most important object takes the largest brightening budget. A naive invert maps light-theme mid-grey (weak contrast) onto dark-theme mid-grey (now stronger contrast), promoting weak roles into the strong band. Two levels that split by “darker” in light theme can also land in a dark-theme band where luminance steps are no longer discriminable. Rebuild means: choose the dark ground, then allocate the limited brightening steps upward — not negate the light swatches. Using surface brightening to show elevation is a different problem; this card is only the importance order on the luminance axis.

Studying it

For one information structure, compare the light original, a mechanical invert, and a rebuild that reallocates luminance against a dark ground. Run first naming on greyscale of all three. The independent variable is the mapping rule; dependents are agreement with intended order and how often secondary is misnamed as primary. Secondary rising on the invert and falling on the rebuild is invert-failure / rebuild-success. Measure in a genuinely dark ambient on the target device; a bright office under-reads contrast inflation.

Where it stops holding

Some light UIs were never “darker = more important” (light type on a pale hero, a coloured primary). Invert talk does not apply; recode by role. High-contrast assistive modes force larger luminance gaps and may swallow the fine steps you rebuilt. Pure black with pure white is already too harsh; titles need not hit absolute white. Saturation blow-up of brand colour and illustration on dark grounds is a colour remap. Do not fold it into this luminance rebuild as one “dark-mode pass.”

Applying it

• Keep a separate luminance-role table for dark theme: ground, caption, body, title, primary — each as brightening against ground, no numbers copied from the light greys.
• Do not ship a one-click invert of the light greys as the dark comp. Re-pick the mid-grey caption so its contrast to the dark ground stays clearly below the title.
• If the primary used a dark fill in light theme, give it a light fill or light stroke in dark theme. Do not drop the same dark slab into the night.
• Check: light and dark pages side by side, both in greyscale. List whether first, second and third importance are the same objects. If captions crack the top two in dark, retune only dark caption luminance until greyscale order matches light intent. Do not patch an unrebuit ladder with extra strokes or saturation.

Related

• Same group: F3.03.1 Luminance difference ranks hierarchy more reliably than hue difference · F3.03.2 High-saturation colour jumps the queue
• Nearby: F5.07 Dark-mode remapping · F5.08 Hierarchy in dark mode · F5.02.3 Semantic colours need luminance retuned in dark mode
• Search terms: dark mode · luminance · inverted contrast · visual hierarchy