Home · Dark-Mode Palette Check
Dark-Mode Palette, Checked Properly
Dark mode colours fail on the second ground: the card, not the page. This view shows a brand colour's whole dark theme — and grades every pairing against the background and the surface, because your text lives on both.
The worked example: #E5E7EB on #111827 measures 14.33:1 — a dark-theme body pairing with room to spare. The failures start further down: muted text and borders, graded here against the surface they actually touch.
The dark theme for this brand colour
Dark themes fail quietly: text solved against the page background washes out on the slightly lighter card it actually sits on. This view grades the dark theme's pairings against both grounds — background and surface — because that is where dark modes break.
Dark pairings, graded
Pairings, not vibes
Most dark-mode guidance is aesthetic — avoid pure black, desaturate, elevate with lightness. All useful, none of it a measurement. The dark theme here is generated by the same solver as the light one: neutral steps from your brand hue for the grounds, text searched upward in lightness until it clears 7:1 against the background and stays legal on the surface, borders and focus rings held to 3:1 against both. The dark-mode guide walks the method with this page's own numbers; the full generator builds both themes side by side and exports them together.
Dark-mode questions
Why do dark-mode palettes fail when the light one passed?
Because the grounds move. In a dark theme, text rarely sits on the page background — it sits on cards and surfaces that are one step lighter, and that single step can take a pairing from 4.6:1 to below 4.5. This view grades dark text against both grounds, which is where the failures hide. The other classic break is the brand colour: a mid-tone blue that carried white text in the light theme often needs the opposite treatment — a lighter step with a dark label — after dark.
Should dark-mode backgrounds be pure black?
Almost never, and contrast is not the reason people think. Pure black (#000000) maximises text ratios, but it makes elevation invisible — a surface cannot be lighter than the page by a visible step without going grey anyway — and it produces harsh halation for many readers with astigmatism. The dark backgrounds generated here sit around 8–12% lightness, leaving room for surfaces above them and keeping text ratios comfortably high.
Is the dark theme just the light theme inverted?
No. Inversion flips hues perceptually and breaks the roles: the light theme’s action colour, inverted, is a different colour entirely. Here both themes are solved from the same brand hue in the same pass, each against its own grounds — the dark action is chosen by testing which label colour (white or near-black) the step can actually carry at 4.5:1.