1. The Common Pitfall of Pure Black (#000000)
Many developers create dark themes by simply flipping white backgrounds to pure black (#000000). However, high-contrast pure white text against pitch-black backgrounds creates extreme contrast that causes optical halation and visual eye strain for readers.
2. Using Deep Charcoal and Slate Tones
Professional design systems (such as Tailwind CSS or GitHub) use deep charcoal or slate bases (e.g. #0B0F19 or #0F172A). These tones soften contrast while allowing vibrant brand accents (indigos, purples, emeralds) to pop cleanly.
3. Communicating Elevation through Surface Lightness
In light mode, drop shadows communicate depth. In dark mode, shadows are nearly invisible against dark backgrounds. Communicate elevation by progressively lightening surface background colors:
- Level 0 (Base Canvas):
#020617(slate-950) - Level 1 (Cards & Feed Panels):
#0F172A(slate-900) - Level 2 (Modals & Dropdowns):
#1E293B(slate-800) - Level 3 (Hover & Active States):
#334155(slate-700)
4. WCAG 2.2 Contrast Verification
Always verify text contrast against background canvas using tools like axe or Lighthouse. Body text must maintain at least a 4.5:1 contrast ratio, while large headlines require a minimum of 3.0:1.
