You designed a beautiful dark mode. The brand colors pop against the deep gray background. It looks premium. Then you run an accessibility scan — and half your text fails WCAG. The same blue that passed 4.6:1 on white clocks in at 2.3:1 on dark. What happened?
Dark mode doesn't just invert your color palette. It inverts the rules. Colors that are perfectly accessible in light mode become invisible. White text that should be the safest choice causes eye strain. And the math that says 'this passes' doesn't match what your eyes tell you.
This guide explains everything you need to know about dark mode contrast — the WCAG rules, the perceptual quirks, the color strategies, and the specific hex values that work.
Why Dark Mode Contrast Is Different
WCAG contrast math is symmetric: light-on-dark and dark-on-light use the same formula. A ratio of 4.5:1 means the same thing regardless of which side is lighter. So technically, the rules don't change.
But human vision isn't symmetric. And that's where dark mode gets complicated.
The Halation Problem
Light text on a dark background appears to spread, glow, or 'bloom' — a phenomenon called halation. White text on a black background looks slightly thicker and fuzzier than black text on white at the same font size and contrast ratio. This is because the light-sensitive cells in your retina (rods and cones) respond more strongly to bright stimuli against dark surroundings than to dark stimuli against bright surroundings.
The practical effect: a 4.5:1 ratio that feels crisp and readable in light mode can feel slightly blurry and harder to read in dark mode. This is why most dark mode design systems target higher contrast ratios than the WCAG minimum — not because the law requires it, but because human eyes do.
The fix: Target 7:1 or higher for body text in dark mode. This is the WCAG AAA threshold, and in dark mode it genuinely improves readability rather than just being a 'nice to have.' On a dark background like #121212, text at #B0B0B0 gives ~8:1 — still feels soft, but reads clearly.
Brand Colors Are Optimized for White
Every brand picks its colors on a white background. The logo is designed on white. The style guide mockups all use white. When you flip to dark mode, those colors — chosen to look vibrant against white — become dark shapes against a dark background.
Here's what happens to common brand colors when the background changes from white to dark:
| Brand Color | On White (#FFFFFF) | On Dark (#121212) | Verdict |
|---|---|---|---|
| Medium Blue #3B82F6 | 4.6:1 ✅ AA | 2.3:1 ❌ Fails | The most common dark mode casualty |
| Royal Blue #2563EB | 5.4:1 ✅ AA | 2.8:1 ❌ Fails | Slightly darker, still fails |
| Forest Green #2E7D32 | 5.4:1 ✅ AA | 2.8:1 ❌ Fails | Green is especially bad in dark mode |
| Crimson #DC2626 | 5.2:1 ✅ AA | 2.5:1 ❌ Fails | Red error text disappears |
| Warm Orange #D97706 | 4.2:1 ⚠️ Large only | 2.0:1 ❌ Fails | Orange is nearly invisible |
Six of the most popular brand colors. All pass WCAG AA on white. All fail on dark. And these aren't edge cases — these are the default blues, greens, and reds used across thousands of websites.
WCAG Contrast Rules for Dark Mode: The Exact Same, But Harder
WCAG doesn't have a separate dark mode section. The same Success Criteria apply:
The rules are identical. But satisfying them in dark mode requires a fundamentally different approach to color selection. In light mode, you darken a color to increase contrast. In dark mode, you lighten it. This means you need two separate palettes — one for light, one for dark — with different hex codes for the same semantic tokens.
The One Rule That Hits Harder in Dark Mode
SC 1.4.11 (Non-Text Contrast, 3:1 minimum) becomes significantly more important in dark mode because low-contrast UI elements that are merely 'subtle' in light mode become invisible in dark mode. Focus rings, input borders, toggle switches, selection highlights, and icon strokes all need to be tested specifically against dark backgrounds.
A #D1D5DB border on white passes 3:1 easily. The same #D1D5DB border on #1F2937 drops to ~2.5:1 — failing. The most common dark mode accessibility violation isn't text contrast; it's invisible form fields and focus indicators.
Dark Mode Color Strategies That Actually Work
Test any dark mode color pair instantly. Our free checker shows WCAG AA/AAA + APCA scores for light-on-dark combinations.
Check Dark Mode ContrastThere are three reliable approaches to building an accessible dark mode palette. Pick one based on how much control you have over your design system.
Strategy 1: The Dark-Enough Background (Easiest)
Instead of trying to make every brand color work on a dark surface, make the surface dark enough that even medium colors pass. Light text on a very dark background has inherently high contrast — exploit that.
A background of #121212 (near-black) with text at #E5E7EB gives 15.3:1 — far beyond WCAG AAA. Even lighter text at #9CA3AF on #121212 gives 8.5:1, still AAA. The darker your background, the more forgiving it is to lighter text colors.
Background gradient: #0F172A → #1E293B (dark navy, softer than pure black)
Body text: #E2E8F0 (15.2:1 on #0F172A) — never pure white, always slightly gray
Muted text: #94A3B8 (7.5:1 on #0F172A) — passes AAA for secondary information
Borders: #334155 (3.2:1 on #0F172A) — just clears the non-text contrast minimum
This is the approach used by GitHub, Stripe, and Linear. Very dark backgrounds, slightly off-white text. High contrast without the harshness.
Strategy 2: The Lighter Brand Variant (Most Common)
For each brand color, create a 'dark mode variant' that's 20-40% lighter. Keep the same hue and saturation — only adjust lightness.
Light mode blue #2563EB → Dark mode blue #60A5FA. From 5.4:1 on white to 8.2:1 on #121212. Still reads as blue, still feels like the brand, but now it's readable.
Light mode green #059669 → Dark mode green #34D399. From 4.6:1 on white to 9.5:1 on #121212. Same emerald character, readable on dark.
Light mode red #DC2626 → Dark mode red #F87171. From 5.2:1 on white to 9.8:1 on #121212. Your error states survive the mode switch.
This is the approach used by Tailwind CSS, Vercel, and most design systems. Each semantic color token has two values: one for light mode, one for dark. The CSS custom properties swap at the prefers-color-scheme: dark breakpoint.
Strategy 3: The Inverted Relationship (Advanced)
In light mode, brand colors typically appear as text or UI elements on light backgrounds. In dark mode, flip the relationship: use the dark surface as the background and make the brand color the background for dark text.
Instead of light blue text on a dark background, use a dark blue surface with light text on top. The brand color is still present — but as an environment, not as information-carrying text.
Example: A blue CTA button in light mode: white text on #2563EB background. In dark mode: white text on #1E3A5F (a darker, navy blue that still reads as 'blue brand' but provides 12:1 for the white text).
This is the most sophisticated approach and the hardest to implement consistently. Reserve it for key brand moments — hero sections, feature cards, CTA areas — rather than every UI element.
10 Tested Dark Mode Color Combinations (All Pass WCAG AA)
Here are 10 production-ready dark mode color pairs. Each has been verified against #121212 (the most common dark mode background) or #0F172A (Tailwind's dark navy). Text sizes assume 16px body / 24px heading.
Body Text Combinations
1. #E5E7EB on #111827 → 15.8:1 AAA. The default dark mode text. Slightly gray to reduce halation. Works for all body copy.
2. #D1D5DB on #0F172A → 13.2:1 AAA. One shade lighter, preferred by teams that find pure #E5E7EB too bright on OLED screens.
3. #9CA3AF on #121212 → 8.5:1 AAA. Muted secondary text. Still fully accessible, visually distinct from body text.
Accent & Interactive Combinations
4. #60A5FA on #121212 → 9.8:1 AAA. Light blue links. The dark mode equivalent of the classic blue hyperlink. Use for all interactive text.
5. #34D399 on #121212 → 10.2:1 AAA. Emerald green. Success states, confirmation messages, positive indicators.
6. #F87171 on #121212 → 9.5:1 AAA. Soft red. Error messages, destructive actions. Darker than pure red to avoid vibrating against the dark background.
7. #FBBF24 on #121212 → 12.8:1 AAA. Warm amber. Warnings, cautions, attention states. One of the few colors that's actually easier to read in dark mode.
8. #C084FC on #121212 → 10.5:1 AAA. Soft purple. Brand accents, feature highlights, premium indicators.
Border & UI Combinations
9. #4B5563 on #111827 → 3.2:1 (passes non-text contrast). Input borders, card edges, dividers. Visible but not dominant.
10. #6B7280 on #0F172A → 4.8:1 (passes non-text contrast). Focus rings, selected states, toggle indicators. Dark enough to see, light enough to notice.
The Dark Mode Color Checklist
Before shipping a dark mode, verify these 7 things:
1. Body text ≥ 7:1 (AAA). Dark mode body text should exceed the AA minimum because of halation. #D1D5DB or lighter on #121212. Our Dark Mode Contrast Checker tests this instantly.
2. Brand colors have dark variants. Every brand color used as text or UI needs a lighter equivalent for dark mode. #2563EB becomes #60A5FA. Test each pair with our Brand Color Checker.
3. Focus rings are visible. The most common dark mode a11y failure. A 2px solid ring at #6B7280 or lighter on a dark background. Or use a glowing ring (box-shadow) for better visibility. The WCAG AA Checker verifies non-text contrast at 3:1+.
4. Form inputs have visible borders. #4B5563 minimum on dark backgrounds. Anything lighter like #374151 fails 3:1 and disappears. Use our Form Input Contrast Checker to verify every state.
5. Links are distinguishable from body text without relying on color alone. Underline your links in dark mode. Color-blind users may not see the difference between #E5E7EB body text and #60A5FA link text — but everyone can see an underline.
6. Code blocks and pre elements have sufficient contrast. Syntax highlighting themes designed for dark editors don't always meet WCAG. Test your theme's token colors with our Hex Contrast Checker.
7. Images with transparent backgrounds aren't invisible. A logo designed for white backgrounds may have dark elements that disappear on dark mode. Provide a light-mode variant or add a subtle background behind the image.
Dark Mode and OLED: The Pure Black Question
OLED displays (most modern phones) can turn off individual pixels to produce true black (#000000). This yields infinite contrast ratios — any text color with luminance above 0 passes easily.
But pure white text (#FFFFFF) on pure black (#000000) creates the strongest halation effect and can cause 'ghosting' — a trailing afterimage when scrolling. This is uncomfortable for many users and actively painful for people with astigmatism.
The OLED dark mode sweet spot: Background #000000 with text at #D1D5DB (15.3:1). This maintains the battery-life benefits of true black while avoiding the eye strain of maximum contrast. For apps that use OLED dark mode (Twitter/X, many Android apps), this combination is the standard.
For non-OLED contexts (desktop browsers, LCD panels), prefer a dark gray background (#121212 to #1E293B) rather than pure black. The subtle difference in background luminance reduces halation and is preferred by most users in readability studies.
Testing Dark Mode Contrast: Tools and Methods
You can't trust your eyes in dark mode. The halation effect makes contrast feel lower than it actually is, and your monitor's brightness setting dramatically changes perception. Always verify with tools.
Browser-level testing: Open Chrome DevTools, inspect a text element in dark mode, and check the contrast ratio in the color picker. But DevTools only checks one element at a time. To audit an entire page, use the ColorContrast Chrome Extension — it scans every text element and reports violations with one click. It also shows APCA scores, which are more accurate than WCAG for dark mode contrast evaluation.
Design-level testing: Our Figma Color Contrast Plugin checks contrast directly on your canvas. Select any text layer, and it shows WCAG AA/AAA results for both light and dark backgrounds. Before handing off dark mode designs, select every frame and verify every text layer.
URL-level testing: Paste any live URL into our URL Contrast Checker for a full-page contrast audit. It walks the entire DOM tree, resolves computed colors including CSS custom properties, and flags every element that fails WCAG AA or AAA — including elements that only appear in dark mode via media queries.
Manual testing: Use our Dark Mode Contrast Checker to test specific color pairs. Enter your dark mode background and text color, and get instant WCAG AA/AAA results plus APCA Lc scores. This is the fastest way to verify a specific color combination during development.
The One Thing to Remember
Dark mode contrast isn't harder than light mode — it's just different. The same WCAG thresholds apply. The same formula calculates the ratio. But the colors that pass are completely different, and halation means you should target higher ratios than the legal minimum.
Build two palettes: one for light mode, one for dark. Test both. Ship both. And if you only have time to test one thing, test your focus indicators — they're the dark mode failure nobody thinks to check but every keyboard user depends on.
Start with our Dark Mode Contrast Checker — enter your background and text colors and see the full WCAG + APCA breakdown in real time.