Dark mode

Contrast

Design systems

Designing Color Systems for Dark Mode

Learn how to build dark themes with balanced contrast, glow-free accents, and accessible surfaces.

Priya Nair

9 min read

4.8

High contrast dark UI with balanced accents

Neutral surfaces and accent chips in dark mode

Example components with accessible contrast

Why dark mode needs different color math

Simply inverting a light theme produces muddy neutrals and harsh accents. Dark mode requires deliberate surface steps and accent restraint.

Build the neutral ramp first

Keep backgrounds above pure black (e.g., #0F1115) to reduce haloing
Use subtle elevation steps (2–4%) for layers and cards
Reserve true black only for media/immersive sections

Accents and focus states

Lower saturation for dark mode accents to avoid glow
Use outlines + subtle glows for focus instead of bright fills
Test primary buttons at 3:1 contrast against surfaces

Accessibility checklist

Meet WCAG AA for text and interactive states
Validate states (hover/active/disabled) for consistent contrast
Pair color with iconography so meaning isn’t color-only