Dark interfaces are everywhere — and “white text on a dark background” done carelessly is one of the most common readability failures in modern product design. The problem is rarely the idea; it is the values. Here are the ones that work, why they work, and the traps that quietly fail accessibility audits.
Start by not using pure white or pure black
The two most extreme colors available are the two you should almost never use for dark-mode body text. Pure #FFFFFF text blooms — a halation effect that makes strokes look thicker and edges softer. Pure #000000 backgrounds maximize the pupil dilation that makes bloom worse and increase the brightness gap when users switch between apps. Every major design system reaches the same conclusion independently: soften both ends.
The values that work
| Role | Recommended value | Notes |
|---|---|---|
| Primary text | #E8EAED or rgba(255,255,255,0.87) | Reads as white; ~13–15:1 on the backgrounds below |
| Secondary text | rgba(255,255,255,0.60) or #A0A4AB | Still above 4.5:1 on dark bases; check on lighter cards |
| Disabled text | rgba(255,255,255,0.38) | Not for content — decorative state only |
| Base background | #121212, #16181D or #1A1A1A | Near-black without the harsh pupil swing |
| Elevated surfaces | #1E1E1E → #2A2A2A | Lighter per elevation level; re-check text contrast |
| Links | #8AB4F8-style light blue | Standard blues (#0000EE, #1a73e8) fail on dark |
Contrast targets
WCAG AA asks for 4.5:1 on body text and 3:1 on large text (roughly 24px regular or 18px bold and above). AAA raises those to 7:1 and 4.5:1. The pairs above land between 11:1 and 15:1 — comfortably past AAA — which is exactly why you can afford to soften: you are spending surplus contrast to buy comfort.
The elevated-surface trap
Dark UIs show depth by lightening surfaces rather than adding shadows. A card at #2A2A2A is visibly lighter than a #121212 page — and secondary text at 60% white that passed on the page may drop below 4.5:1 on the card. Audits fail here constantly. Check every surface level, not just the page background, and keep a stricter text color for use on elevated components.
Typography adjustments for dark
Light-on-dark text appears slightly bolder than the same font dark-on-light, because bright strokes bloom outward. Compensate: drop one weight step for body text if your font family allows it, add a hair of letter-spacing at small sizes, and never use thin or light weights below 16px on dark — they shimmer and break apart. Line length matters more too; keep body text to 60–70 characters so the eye can track back to the next glowing line.
Color and imagery
Saturated brand colors that look great on white often vibrate on dark. Desaturate accents slightly and lighten them (Material’s approach: shift to lighter tonal variants for dark mode). Pure white images or logos on dark surfaces benefit from a subtle reduced opacity or a soft container.
Test any color pair yourself with our free contrast checker — live WCAG ratios as you pick.
Quick answers
What is the best white for dark backgrounds?
#E8EAED or rgba(255,255,255,0.87). Both read as white while cutting the halation of pure #FFFFFF.
Should dark mode use pure black?
For reading surfaces, no — #121212 to #1A1A1A is more comfortable. True black is best reserved for OLED wallpapers and media surrounds; see our black background downloads.
Should links stay blue in dark mode?
Lighten them. Light blues like #8AB4F8 keep the link affordance and pass AA; standard web blue fails.
Why does my dark UI fail audits when the base colors pass?
Almost always elevated surfaces: text checked against the page background but rendered on lighter cards or modals.
See also: the readability science behind white-on-black and when a black background is the right creative choice.