WCAG Contrast for Dark Mode

Dark mode has moved from a developer preference to a mainstream user expectation, and many products now ship both a light and a dark theme. A common assumption is that dark mode is inherently accessible because it increases contrast. In practice, the opposite is often true: dark themes introduce a distinct set of contrast failures that are different from, and sometimes harder to spot than, those found in light themes.

WCAG thresholds apply equally to dark mode

WCAG 2.2 does not distinguish between light and dark themes. The same contrast ratio requirements apply regardless of whether the background is white or near-black:

• Normal text: ≥ 4.5:1 (AA) or ≥ 7:1 (AAA)
• Large text (≥ 18pt or ≥ 14pt bold): ≥ 3:1 (AA) or ≥ 4.5:1 (AAA)
• UI components (buttons, borders, icons): ≥ 3:1 against adjacent colors

What changes in dark mode is the direction of the luminance difference: text is now lighter than the background, whereas in light mode it is darker. The math is the same but the intuition is inverted, which is where many designers go wrong.

The most common dark mode contrast failures

These are the patterns most frequently flagged in accessibility audits of dark interfaces:

• Muted grey text on a dark background. A common "secondary text" color like #6B7280 on a dark background like #111827 achieves only around 3.1:1. It looks readable in isolation but fails the 4.5:1 AA threshold for body-size text.
• Mid-blue links on dark grey. Brand blues that pass on white often fail on dark backgrounds. A color like #3B82F6 on #1F2937 achieves approximately 4.0:1 — close, but failing AA for normal text.
• Subtle borders and dividers. Lines used to separate sections — common in dark interfaces — need 3:1 against the adjacent background if they convey structural meaning. Very subtle dark dividers almost universally fail this threshold.
• Disabled state text. Disabled inputs and labels rendered at very low opacity on a dark background frequently drop below 3:1. WCAG exempts disabled UI from contrast requirements, but many teams apply accessibility guidelines more broadly than the spec requires.

Recommended lightness ranges for dark theme text

On a typical dark background in the #0D0D0D to #1E1E1E range, the following lightness targets for text colors (in HSL) reliably hit the required thresholds:

• Primary text: L ≥ 85% → achieves ≥ 10:1 on most dark backgrounds. Common choice: #E5E5E5–#F0F0F0.
• Secondary text: L ≥ 65% → typically hits 4.5–6:1. Needs to be verified per background. Common pitfall: many design tokens for "muted" text sit at L ≈ 45–55%, which fails.
• Tertiary / label text: If used for non-decorative content, L ≥ 60% is the minimum to target. Anything dimmer than this should be used for decorative purposes only.

Checking dark mode systematically

The most reliable workflow is to maintain explicit dark-mode token pairs in a spreadsheet or design token file and run a contrast check for each pair. This means listing every foreground token with every background it appears on in dark mode — not just the obvious body-text-on-page-background pair, but also secondary text on card backgrounds, icon colors on button backgrounds, and focus ring colors against the page.

The Flowfiles contrast checker lets you enter any two hex values and instantly see the ratio. Keep a tab open as you work through your dark token list and flag failures before they reach production.

Dark mode and APCA

APCA (Advanced Perceptual Contrast Algorithm, proposed for WCAG 3) behaves differently from the WCAG 2.x formula in dark mode. Because human contrast perception is not symmetric — we are more sensitive to luminance differences against dark backgrounds — APCA assigns different Lc values to the same pair depending on which color is the foreground. For dark mode, APCA often requires slightly higher lightness values for text to match the perceptual equivalent of a light-mode design. This is one of the key improvements APCA brings over the current formula.