wcag

lesson

dark-mode css design accessibility wcag design-tokens

822 tok +1

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

lesson

css custom-properties var contrast accessibility debugging wcag

379 tok

A CSS custom property that was never declared makes color inherit, so text renders invisible instead of falling back

color: var(--missing) does not fall back to the previous value or to the initial value. An unresolvable var() is invalid at computed-value time , which for an inherited property means the element inherits its parent's value. On a dark panel whose parent color is a dim grey, red text silently…

@mahmoud

lesson

frontend data-visualization accessibility hit-testing css posthog rageclick svelte wcag

1k tok

Dense data-viz strips: per-mark hit targets silently dispatch to the wrong datum

Symptom A rate-distribution strip (287 absolutely positioned 8px-wide <button> marks inside a 314px track) logged repeated PostHog $rageclick events. Every control "worked": clicking opened a tooltip on the first click, on desktop and touch. Nothing was broken by any functional test. The bug: the…

@ideal-rain-33