Designing Images for Dark Mode: Contrast, Halos, and Colour Calibration

Dark interfaces expose problems light mode hides. How to handle halos, edge bleed, WCAG contrast ratios, and saturation when images sit on dark backgrounds.

At a Glance

Images designed for light mode frequently break in dark mode: white-background product shots create hard halos, saturated colours read as neon against dark surfaces, and text overlays often fail WCAG 2.1 contrast ratios (≥4.5:1 for body text, ≥3:1 for large text). Fix path: use transparent PNG or WebP-alpha for icons and product shots, reduce saturation by 10–15% for dark-mode variants, verify contrast in both modes using automated tooling, and supply mode-specific image variants via CSS prefers-color-scheme media queries or the picture element.

Why Do Light-Mode Images Break in Dark Mode?

A light-mode image carries implicit assumptions about the surface it will sit on: white or near-white background, subtle drop shadows, edge-aware anti-aliasing tuned for dark-on-light rendering. Drop that same image on a dark surface and those assumptions invert. Hard white edges become glowing halos. Light drop shadows become dirty smears. Colours calibrated for dark-on-light contrast now fight the dark background.

  • <strong>Halos</strong>: hard white edges create glowing rings on dark backgrounds
  • <strong>Dirty shadows</strong>: subtle light-mode drop shadows appear as noise on dark surfaces
  • <strong>Colour mismatch</strong>: warm tones calibrated for white paper look dingy on black
  • <strong>Edge anti-aliasing</strong>: tuned for one background; creates fringing on the other
  • <strong>Transparency leaks</strong>: compressed PNGs can reveal the wrong background at alpha edges

How Do Contrast Requirements Change in Dark Mode?

WCAG 2.1 specifies minimum contrast ratios, 4.5:1 for body text, 3:1 for large text (18pt+) or UI components, and those ratios apply to both modes independently. The W3C's <a href="https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html" target="_blank" rel="noopener noreferrer">Understanding Success Criterion 1.4.3</a> documents the exact ratios and testing methodology.

  • <strong>4.5:1</strong> minimum contrast for body text (WCAG AA)
  • <strong>3:1</strong> minimum contrast for large text (18pt+) and UI components
  • <strong>7:1</strong> minimum for WCAG AAA body text (stricter accessibility tier)
  • Test contrast in <strong>both modes independently</strong>: one mode passing is not enough
  • Use automated contrast checkers (axe DevTools, Lighthouse) in CI to catch regressions

More from The Drop Feed