Week 49 · Future Architectures

09:41Standby

LCD — backlit

09:41Standby

OLED — emissive

Room brightness8%

Dark roomFull sun

Glow-gap visibility: obvious — a dark room

Emitting
Less

Same dark screen, drawn on two panels: one backlit, one emissive. Drag the room lights and watch which one actually goes black.

Predict

Is pure #000 the best background for a dark theme?

Part I

The Glow Bench

Four sliders, one theme, no shadows anywhere on the canvas below — every raised surface is drawn lighter, never darkened and blurred underneath.

Push background lightness down toward 0% and text up toward 100% and watch the Text / bg ratio climb toward its ceiling — then watch Halation and Eye strain climb with it. The best-reading theme on this bench is rarely the one with the highest ratio number.

The Glow Bench

Tune, then read the four numbers below

Reading a line of body text at this lightness, on this surface.

Card — raised once

Live

Ramp: 4.0% → 8.0% → 12.0% → 16.0%

Text / bg: 15.9:1; Passes 4.5:1
Accent / bg: 9.2:1; Passes 3:1
Halation: 8; Modelled — Low
Eye strain: 41; Modelled — Moderate

Background lightness4%

Pure black12%

Text lightness90%

DimPure white

Accent luminance58%

RecessedBright

Elevation step size4 pt

FlatSteep

Text/bg and accent/bg are the real WCAG 2.x contrast formula (Sources — W3C “Understanding SC 1.4.3”), computed on the exact colours rendered above. Halation and eye strain are modelled — invented indices, not published scales — built from Rule 1’s own line that comfortable contrast “clears WCAG minimums but avoid[s] needing to exceed roughly 15:1”: halation = weighted overshoot past 15:1, plus a flat penalty for literal pure black or pure white; eye strain = distance from a 9:1 midpoint, plus a penalty below the 4.5:1 minimum. Formulas live in luminescence-math.ts.

Part II

A Phosphor, A Shutter, A Pixel

In 1978 a display’s resting state was dark because nothing was exciting the phosphor. In 2019 a display’s resting state could be dark again, for the first time since — but only on some screens.

The DEC VT100 (1978) painted its 80×24 grid on a phosphor-coated tube — commonly P1, green — that is dark until an electron beam strikes it. Light-on-dark wasn’t a mood; it was “what the physics of the tube made cheap.” A decade later, Xerox’s WYSIWYG editors flipped the convention on purpose, because the screen’s new job was to preview paper, and paper is white with dark ink.

CRT — phosphor

Beam excites phosphor; unexcited glass is dark by default.

LCD — shutter

A backlight burns behind every pixel; the shutter only ever closes so far.

OLED — emissive

Each pixel is its own light. Told to go dark, it draws nothing.

LCD never abandoned the backlight logic: liquid crystal twists to block or pass light from a panel that is always on behind it, so a pixel told “black” is a shutter closed as tightly as it can manage, with some light still bleeding through. OLED removes that layer entirely — an unlit pixel “does not produce light or consume power, allowing true blacks.” That single difference is why a real power-savings or true-contrast argument for dark mode only holds on emissive panels (a 2016 Google Pixel measurement: full white can cost roughly six times what pure black costs, on OLED specifically).

Depth without a shadow is the next problem a near-black surface creates: you cannot darken a surface further to imply it sits underneath something, so Material’s dark-theme system answered with elevation overlays — a translucent white lift, more opaque the higher the surface sits. Worth stating precisely: Google’s own documentation now says that specific mechanism “has been replaced with tonal surface colors” and its maintenance “discontinued,” in favour of a fixed named ramp. The principle survives the implementation change — lighter reads closer — even though the exact API that first expressed it did not.

Light mode won across all dimensions: irrespective of age, the positive contrast polarity was better for both visual-acuity tasks and for proofreading tasks.

Nielsen Norman Group, synthesizing Piepenbrock et al. 2013

That finding is the manual’s most uncomfortable one for a dark-mode-by-default instinct: a smaller, light-mode pupil produces “fewer spherical aberrations, greater depth of field” — sharper focus, most of the time, for most sighted readers. Negative polarity still wins on its own terms: for cataract and cloudy-ocular-media conditions, for genuinely low ambient light, and for anything that is monitored in bursts rather than read at length. Neither polarity is universally correct; which one is correct depends on what the screen is being asked to do, and in what room.

Part III

Five Moves, One Rule Each

Scrub across five things a dark theme can do. Four of them are the manual’s own numbered rules; the first is the mistake they all correct.

Move

True blackGlow as signal

True black — Rule 1 — the naive default: #000, #FFF, no elevation.

Body text at pure white on pure black.

Card — same black, only a hairline

Part IV

Invert, or Design for Emission

Same content, same brand hue, two different constructions.

The manual names the first construction as its own common mistake: “inverting the light theme’s box-shadow color and calling it a dark theme” produces “a hazy, undefined glow instead of a legible depth ordering.” The second follows Worked Example 1’s loop directly — a genuine lightness ramp, an accent token resolved to a desaturated dark-theme value rather than the light-theme hex, and exactly one element allowed to glow.

Weekly digest

3 new replies

Same hex, inverted shadow

Weekly digest

3 new replies

Ramp + paired accent, sat. 42 not 96

Both mocks are this build’s own illustration of Part 9’s named mistake and Part 10’s Worked Example 1 — graded secondary in Sources, since neither is a screenshot of a shipped product, only a construction of the dossier’s own described anti-pattern and fix.

Part V

The Smear

Drag a bright readout across a dark field and it trails — more, and longer, the closer that field sits to pure black.

The smear

Drag the cursor; watch the trail

Cursor position20%

This simulates the halation mechanism Rule 1 and Part 6 describe — “a halo-like effect... [that forms] around bright points or edges” when light is too intense for a surface to fully absorb — not a hardware pixel-response artifact. The dossier does not document OLED “black smearing” as its own, separate phenomenon, so this build does not claim it; the trail above is graded unverified as a UI finding, exactly as the dossier grades its own halation-to-interface bridge. Ghost count drops to one under reduced motion.

Challenge · Tune the theme

Open

Four sliders, four constraints, all at once: text ≥4.5:1, accent ≥3:1, three elevation levels distinguishable, and the background not pure black.

Body copy at the tuned lightness.

Live

Background not pure black
Text ≥4.5:1 (21.0:1)
3 elevation levels distinguishable
Accent ≥3:1 (13.3:1)

Background lightness0%

Text lightness100%

Accent luminance74%

Elevation step size0 pt

Start with the background — it fails two constraints at once from here.

Insight

Dark mode is not the absence of light; it is the discipline of emitting less.

A CRT was dark by default because nothing was exciting its phosphor. An OLED is dark by default because an unlit pixel draws nothing. Both are the same discipline restated across five decades: light where it is needed, none where it is not — spent on one glowing dot that means something, not scattered across a screen that only looks like it’s trying to impress you.

Mental model

Whenever a dark theme is being reviewed or shipped,

look for which surface is allowed to be the lightest, not which is allowed to be the blackest — and which single element is allowed to glow,

because the real ergonomic case for negative polarity is emission and restraint, not how dark the paint can go, and a pure-black background trades an elevation system and a comfortable contrast ceiling for a ratio number that was never the actual goal.

Tomorrowopen a dark screen you shipped and find its darkest pixel. If it's literal #000, you've found the fix before you've found the bug report.

End of experience

← Back to the constellation

EmittingLess

The Glow Bench

A Phosphor, A Shutter, A Pixel

Five Moves, One Rule Each

Invert, or Design for Emission

The Smear

Where this idea goes next

EmittingLess

The Glow Bench

A Phosphor, A Shutter, A Pixel

Five Moves, One Rule Each

Invert, or Design for Emission

The Smear

Emitting
Less

Emitting
Less