High Contrast Dark Theme Design

Building a High-Contrast Dark Theme

A high-contrast dark theme targets WCAG AAA compliance (7:1 for normal text) while avoiding the eye strain that comes from extreme contrast. This requires careful selection of background, surface, and text colors.

The Halation Problem

Pure white (#ffffff) text on pure black (#000000) creates a 21:1 contrast ratio, but it causes a visual artifact called halation in users with astigmatism (approximately 50% of the population). The bright white text appears to glow and bleed into the black background, making it harder to read.

Recommended Color Scale

:root {
  /* Background layers */
  --bg-base: #0a0a0b;     /* Deepest background */
  --bg-surface: #141415;  /* Card/panel background */
  --bg-elevated: #1e1e20; /* Modals, dropdowns */

  /* Text colors */
  --text-primary: #e4e4e7;   /* 15.39:1 vs base - AAA */
  --text-secondary: #a1a1aa; /* 7.41:1 vs base - AAA */
  --text-tertiary: #71717a;  /* 4.30:1 vs base - AA only */

  /* Borders */
  --border-default: #27272a; /* 2.08:1 vs base */
  --border-strong: #3f3f46;  /* 3.22:1 vs base */
}

Contrast Matrix

Element	Color	vs #0a0a0b	vs #141415	WCAG
Primary text	#e4e4e7	15.39:1	12.96:1	AAA
Secondary text	#a1a1aa	7.41:1	6.24:1	AAA / AA
Tertiary text	#71717a	4.30:1	3.62:1	AA / Large
Links	#60a5fa	6.61:1	5.56:1	AA

Tips for Comfort

1. Use off-white for primary text: #e4e4e7 (zinc-200) instead of #ffffff
2. Layer backgrounds: Use slightly lighter surfaces (#141415) for cards to create depth without relying on borders alone
3. Limit pure white: Reserve #ffffff for focused elements or high-emphasis buttons
4. Test on actual screens: Dark mode contrast can vary significantly between monitor types (OLED vs LCD)