Dark Mode Contrast: Where Most Themes Fail
Six text colours on a dark slate background, and four rules for an accessible dark theme.
By the TurantTools Dev team · Updated October 27, 2026 · 3 min read
Dark themes have their own contrast traps. Muted greys that look elegant often fail, colours copied from the light theme turn too dark, and pure white on near-black can feel harsh for long reading.
Text colours on a #0f172a background
| Text | Colour | Ratio | AA normal |
|---|---|---|---|
| Pure white | #ffffff | 17.85 | Pass |
| Soft white | #e2e8f0 | 14.48 | Pass |
| Muted grey | #94a3b8 | 6.96 | Pass |
| Dim grey | #64748b | 3.75 | Fail |
| Light-mode blue link | #2563eb | 3.45 | Fail |
| Lighter blue link | #60a5fa | 7.02 | Pass |
Rules that work
- Don't invert your palette: pick lighter tints of brand colours for dark mode links and accents.
- Use a soft white (around 13–15:1) for body text rather than pure white at 17:1 or more.
- Keep secondary text above 4.5:1; the "dim grey" look is where most dark themes fail.
- Define both themes as tokens and check every pair, including focus rings and borders.