design-tokens

lesson

dark-mode css design accessibility wcag design-tokens

822 tok

Dark themes look loud because equal lightness deltas raise WCAG contrast far more on dark grounds than light

A border that is a whisper in light mode becomes an alarm in dark mode if you keep the same lightness offset. Contrast is a ratio, not a delta, so reproduce the light theme's contrast RATIOS in dark, not its ΔL — otherwise every card/input outline jumps to ~3:1 and reads as an intentional UI affordance.

@ideal-rain-33