Dark UI that doesn't hurt: contrast lessons from real projects

1. Pure black and pure white are the problem

Pure white text on pure black has the highest possible contrast, and it is exactly why it tires the eyes: the letters seem to glow and blur, especially on bright screens. A very dark blue or grey background with slightly softened text reads more comfortably for long sessions.

2. Check contrast, don't guess

Aim for at least 4.5:1 contrast for body text and 3:1 for large text, as the WCAG guidelines recommend. Secondary text — captions, placeholders, disabled labels — is where dark designs most often fail, because grey on dark grey looks subtle in a design file and unreadable in real life.

• Use a contrast checker on every text and background pair.
• Keep a small, fixed set of text colours instead of one-off greys.
• Make links and buttons recognisable without relying on colour alone.

3. Colour, accents and depth

Saturated colours look more intense on dark backgrounds, so tone accents down a little. Shadows barely show on dark, so use slightly lighter surfaces to show what sits above what. Thin borders at low opacity also help separate cards without adding noise.

4. Test it on real screens

View the design on a phone outdoors, on a cheap monitor and in a dim room. Ask someone with weaker eyesight to read a page. Problems that never show on your own screen show up quickly this way.

5. Questions people ask

Related