Dark UI contrast — getting accessibility right
Pretty dark UIs often fail WCAG. Two ratios to remember and one tool that catches mistakes before users complain.
Dark UIs look elegant when designers put #aaa text on #1a1a1a background. They also fail every accessibility audit.
The two numbers:
- 4.5:1 for normal body text
- 3:1 for large text (24px+) and UI components
That dim grey on dark you see in design dribbbles? Usually 2.8:1. Looks good on a 5K monitor, breaks for users with visual impairment, breaks under sunlight.
Tools: Stark plugin for Figma, WCAG Contrast Checker. Run them on every component before shipping.
Pro tip: pick foreground colors with the same hue tint as background. Avoids the muddy grey that AI design tools love. Our site uses #f3ede3 on #1a1410 — both warm-tinted.