Dark Mode Contrast: What Actually Passes on Dark Backgrounds

Switching a theme to dark does not make it accessible — it just moves the failures somewhere new. White headlines will pass with room to spare, but the muted grays and brand colors you tuned for white backgrounds behave completely differently on dark ones. Every number below is computed with the WCAG 2.1 formula against real dark surfaces, so you can copy the exact hex values.

The polarity flip: your light-theme grays reverse their verdicts

The WCAG formula is symmetric — it only compares two luminances — so flipping a pair from dark-on-light to light-on-dark changes the ratio. Two familiar grays tell the whole story:

Rule of thumb: in dark mode, secondary text must be lighter than you expect. If your light theme's muted gray is around #6B7280, its dark-theme equivalent is closer to #9CA3AF or lighter.

Body and secondary text on #121212

#121212 is the standard near-black dark background (pure black is harsher and, on OLED screens, can smear during scrolling — near-black avoids both problems while still scoring AAA with white). Measured against it:

Note the disabled-text trap: #52525B at 2.42:1 fails even the 3:1 large-text bar. If disabled text still needs to be readable (a disabled button label, a caption), it is not exempt from contrast just because it is disabled — keep it at 3:1 or above, or remove it from the reading flow.

Cards are lighter than the background — re-check everything on them

Dark themes lift cards above the background (elevation). A card at #1E1E1E on a #121212 page is lighter, so every text color on it scores slightly lower:

The drop is small but it demotes #9CA3AF from AAA to AA on cards. If your design system promises AAA secondary text, use a lighter secondary (such as #D1D5DB, 11.31:1 on #1E1E1E) on elevated surfaces. And the same rule applies to other dark surfaces: on slate #0F172A, #9CA3AF scores 7.03:1 and #6B7280 scores 3.69:1 — the same pass/fail pattern, slightly different numbers. Always measure against the actual surface, not the page background.

Accent colors: bright brand colors love dark backgrounds

Here dark mode is generous. Bright accents that are unreadable on white become excellent text colors on dark:

So in dark mode you usually do not darken the brand color for text — use the bright version as-is. The dark-mode mistake is the mirror image of the light-mode one: darkening an accent "to be safe" can push it back toward failure. If you need a link color, test the bright accent first; it probably already passes. One caution: a passing ratio is not the whole story — run bright-on-dark pairs through the color blindness simulator, since hue-only distinctions (green success vs red error) still fail users who cannot tell the hues apart.

The opacity trap: measure the blended color, not the percentage

Many design systems define dark-mode text as white at an opacity — 87% for primary, 60% for secondary, 38% for disabled. That is fine only if you check what the blend actually produces on each surface:

The 38% "disabled" level fails normal text — same trap as #52525B above. Worse, opacity blends depend on what is underneath: the same 60% white scores 7.16:1 over #121212 but 6.77:1 over a #1E1E1E card (blended #A5A5A5), and 38% white gives 3.57:1 on both — failing on both. Prefer solid grays from a fixed scale so a token means the same ratio everywhere it is used.

Dark mode checklist before you ship

• Re-measure every text token against its actual surface — page background, card, and modal are three different backgrounds.
• Secondary text at #9CA3AF or lighter on #121212; nothing darker than that for normal-size text.
• Disabled and placeholder text at 3:1 or above if it still needs to be read; otherwise remove it instead of dimming it into invisibility.
• Use bright accents as-is for dark-mode links and labels — do not darken them "to be safe".
• Replace opacity-based text colors with solid grays so the ratio does not drift with the surface underneath.
• Check focus indicators and borders too: a 1px border at #52525B on #121212 (2.42:1) is nearly invisible as a focus ring.
• Run the finished dark theme through the color blindness simulator — passing ratios do not fix hue-only meaning.