Designing Dark Interfaces That Don't Feel Like a Black Hole

Dark interfaces are fashionable, and most of them are worse than the light version they replaced. The problems are consistent and fixable, but only if you stop treating dark mode as a colour inversion.

Depth has to be built, not borrowed

In a light interface, depth comes from shadow — a dark object on a light background reads as raised. On a dark background that stops working. You cannot cast a shadow into a void.

Depth in dark UIs comes from lightness. A raised surface is lighter than the one behind it, because it's catching more light. This means:

• Your base surface should not be pure black
• Each elevation step gets incrementally lighter
• Borders do more work than shadows ever did

Pure black (#000000) is usually the wrong base. It leaves nowhere to go darker, and it makes text shimmer against the high contrast.

Contrast is not the goal

There's a reflex to push contrast as high as possible — pure white text on pure black. It passes every accessibility check and is genuinely unpleasant to read for more than a minute.

The reason is halation: bright text on a dark field appears to bloom and smear, especially for readers with astigmatism. Off-white text — something in the #E2E8F0 range — is easier on the eye and still comfortably passes AA.

Accessibility is a floor, not a target. Passing the ratio doesn't mean it's comfortable.

Saturation behaves differently

A saturated colour that looks confident on white looks radioactive on black. The same hex code, different perceptual result.

The fix is to desaturate and lighten accents for dark backgrounds. A blue that works on white often needs to lose 10–20% saturation and gain lightness to feel equally confident on black.

Text hierarchy needs more room

On light backgrounds, you can distinguish levels of text with small changes in grey. On dark, those differences compress and the hierarchy flattens.

You need larger steps between primary, secondary, and muted text. Where light mode might use #111, #555, #888, dark mode needs more spread — and a weight change as well, not just colour, to keep the hierarchy legible.

The check that catches most of it

Squint at the interface, or better, view it at 30% brightness on a laptop in a lit room. If the structure survives that, the depth is real rather than carried by contrast alone.

Dark mode is not a filter. It's a separate design pass with its own physics — and treated that way, it can be genuinely better than the light version instead of just dimmer.