Dark Mode Design: Contrast Tokens, Accessibility, and Perceptual Balance

Implementing a dark mode theme is more nuanced than simply inverting white background pixels into black. Naive dark mode implementations introduce severe halation (glowing text blur), eye fatigue, and illegible contrast ratios. A disciplined token palette is required for accessibility.

1. The Perils of Pure Black (#000000)

Pairing pure white text (#ffffff) against a pure black (#000000) background creates extreme contrast that causes ocular fatigue. Modern dark modes use rich dark grays or midnight hues (e.g. #0a0a0c or #121214) as base canvases.

2. Elevation Through Surface Lightness

In light mode, elevation is communicated with drop shadows. In dark mode, drop shadows become invisible. Instead, communicate elevation through surface lightness: background is darkest (#0a0a0c), card surfaces are slightly lighter (#18181b), and dialog modals are lighter still (#27272a).

"In light mode, shadows create depth. In dark mode, surface luminance creates depth. Adapt your elevation rules accordingly."

3. Desaturating Accent Colors

Highly saturated brand colors that look sharp on white backgrounds vibrate aggressively against dark canvases. Desaturate primary accents by 15-20% in dark mode to ensure visual harmony and accessible readability.

• Base surface: Tinted deep charcoal (#09090b or #0c0e14), never pure #000000.
• Surface elevation tiers: 5% luminance increase per elevated card or modal level.
• Text hierarchy: Primary (#f4f4f5), Secondary (#a1a1aa), Disabled (#52525b).
• Border treatment: 1px subtle borders (rgba(255,255,255,0.08)) to define shape edges.