Building Accessible Dark Mode

By swatches.net team • February 2026 • 8 min read

Dark mode has become a standard feature in modern applications. But implementing it accessibly requires more than inverting colors. Here's how to do it right.

Why Dark Mode Matters

Users prefer dark mode for various reasons: reduced eye strain in low-light environments, battery saving on OLED screens, and personal preference. However, poorly implemented dark mode can actually hurt accessibility more than help it.

Common Mistakes

Pure black backgrounds (#000000): Creates too much contrast and causes eye strain
Simply inverting colors: Breaks carefully crafted contrast ratios
Forgetting about images: Light-background images look jarring in dark mode
Ignoring WCAG standards: Dark mode still needs 4.5:1 contrast for text

Best Practices

1. Use Elevated Blacks

Instead of pure black, use slightly elevated tones like #0F0F0F or #121212. This creates depth and reduces eye strain.

:root[data-theme="dark"] {
  --bg: #0F0F0F;
  --bg-alt: #1A1A1A;
  --text: #E5E5E5;
}
            

2. Maintain Contrast Ratios

WCAG AA requires 4.5:1 for normal text in both light and dark modes. Test every color combination.

/* Bad - insufficient contrast */
color: #888888; /* 2.9:1 on #0F0F0F */

/* Good - meets AA standard */
color: #B8B8B8; /* 5.2:1 on #0F0F0F */
            

3. Desaturate Bright Colors

Highly saturated colors that work in light mode can be overwhelming in dark mode. Reduce saturation by 10-20%.

Pro Tip: Use HSL color space for easy saturation adjustment. Change hsl(220, 90%, 50%) to hsl(220, 75%, 55%) for dark mode.

Implementation Example

Here's a complete CSS setup for accessible dark mode:

:root {
  --bg: #FAFAFA;
  --text: #1A1A1A;
  --border: #E5E5E5;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0F0F0F;
    --text: #E5E5E5;
    --border: #2A2A2A;
  }
}

body {
  background: var(--bg);
  color: var(--text);
  transition: background 0.3s, color 0.3s;
}
            

Testing Your Dark Mode

Use browser DevTools to test both themes
Check with a contrast checker tool (swatches.net/accessibility/wcag-guide)
Test on actual OLED screens to check for pure black issues
Get feedback from users with light sensitivity

Conclusion

Accessible dark mode requires intentional design decisions. By following WCAG standards, using elevated blacks, and maintaining proper contrast, you can create dark modes that truly benefit all users.