Home · Guides · Dark-Mode Accessible Colours

Dark-Mode Colours That Still Pass: Pairings, Not Vibes

Most dark-mode advice is aesthetic. This is the measured version: pick grounds with headroom, solve text against two grounds, re-test the brand colour instead of inverting it — and know the numbers at each step.

Step 1 — Grounds with headroom

Set the page background around 8–12% lightness — the #111827 neighbourhood, a neutral drawn from your brand hue at a whisper of chroma — and the surface one clear step lighter. Pure black is a trap twice over: surfaces have nowhere to go, and bright text on true black blooms for readers with astigmatism. A background that is too light spends the contrast budget before text is even chosen. The pair above — background #111827, body #E5E7EB at 14.33:1 — shows how much headroom a disciplined ground leaves: enough to spend some on muted text and still pass.

Step 2 — Text against both grounds

Solve body text upward in lightness until it clears your target (7:1 is reachable for dark body text surprisingly often) against the background, then verify against the surface and keep walking if the surface fails it. Muted text gets the same two-ground treatment at 4.5:1 — it is the role that fails silently, because on the page background it looked fine in the design tool, and nobody rendered it on a card. The dark-mode view runs exactly this grading for any brand colour: background and surface columns, both verdicts visible.

Step 3 — The brand colour is re-tested, never inverted

Inversion is arithmetic, not design: it maps your action colour to its complement-ish opposite and breaks every role it touches. The sound approach is to keep the hue and re-solve the step: on a dark ground the action usually needs a lighter step than the light theme used, and the label colour flips — the step that carried a white label in the light theme may need a near-black label after dark, or vice versa. Test both labels against the step and keep whichever passes at 4.5:1; if neither passes at any nearby step, the honest answer is a derived step for dark, with the brand colour kept as the accent. The generator does this in the same pass as the light theme and states, in its notes, which choice it made and why.

Step 4 — Borders and focus get darker-theme rules too

Non-text elements need 3:1 against their adjacent colours in the dark theme as well — and adjacency inverts: borders must be lighter than the grounds by enough luminance, focus rings must clear both the surface and the page. A ring carried over from the light theme is a coin toss. Grade them where they live, in the matrix, and the dark theme stops being the place audits go to find things.