Design
Dark UI contrast that still passes
Nina Alvarez · 2025-03-19 · 6 min
Resources
Atmosphere is allowed. Invisible body copy is not. Dark marketing sites love muted grey on darker grey because it looks expensive in a screenshot. It fails in a brightly lit office and it fails WCAG.
We test muted-on-surface pairs and raise the floor before we ship glass. Glow is decoration. Contrast is the product.
Glow is not contrast
A blue bloom behind a button does not help a low-vision reader. We keep focus rings boring and bright, and we never remove outlines because they 'clashed with the brand'.
Glass panels get a real fill opacity, not a rumour of a panel. If text sits on a photo, we add a scrim until the contrast checker is quiet.
Check in the real lighting
We look at the site on a phone outdoors and on a washed-out laptop. Studio monitors lie. Customers do not live in our studio.
Ship contrast that passes, then add atmosphere on top. The other order is how you rebuild a homepage after launch.
Related articles
Design
Figma-to-code contracts that survive a sprint
Auto-layout, named layers, and the inspection ritual we run before estimate.
Omar Farouk · 2025-02-07 · 6 min
Read articleDesign
Motion that does not lie about state
Duration, easing, and the reduced-motion path we ship on every marketing surface.
Nina Alvarez · 2025-04-08 · 6 min
Read articleDesign
Ship tokens before you ship a button
Color, type, and space as code — so dark mode is not a weekend project.
Nina Alvarez · 2025-05-16 · 6 min
Read article