Dark interfaces are everywhere — but “white text on a dark background” done carelessly is one of the most common readability failures in modern design. Here are the working values.
The values that work
Text: not pure white. Use #E8EAED (Google’s dark-mode text), #E6E6E6, or rgba(255,255,255,0.87) — Material Design’s high-emphasis standard. Pure #FFFFFF on dark blooms and fatigues. Background: not pure black either. #121212 (Material), #16181D, or #1A1A1A give depth without the harsh pupil swing of #000000 — reserve true black for OLED-focused wallpapers like our black background downloads. Secondary text: rgba(255,255,255,0.60) keeps hierarchy while staying above minimum contrast on most surfaces.
Contrast targets
WCAG asks for 4.5:1 on body text and 3:1 on large text (AA). The pairs above land between 11:1 and 15:1 — comfortably past AAA. The trap is elevated surfaces: dark UIs lighten cards and modals to show depth, and text that passed on the base background can quietly fail on a lighter card. Check each surface, not just the page background.
Typography adjustments
Light-on-dark text appears slightly bolder than the same font dark-on-light (strokes bloom outward). Compensate by dropping one weight step for body text if your font family allows it, adding a touch of letter-spacing to small sizes, and avoiding thin weights below 16px entirely — they shimmer.
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 links stay blue in dark mode?
Standard blues fail contrast on dark. Lighten them — #8AB4F8-style light blues keep the “link” affordance and pass AA.