Soft UI that stays accessible
The two-shadow look, minus the usability failures.
Updated · 4 min read
Neumorphism — soft UI — makes elements look extruded from the page: same color as the background, shaped entirely by two shadows, a dark one on one side and a light one on the other. The catch is structural: the style's whole aesthetic comes from low contrast, and low contrast is precisely what accessibility guidelines exist to prevent. You can have the look and usable UI — but only by knowing where the line is.
The two-shadow technique in one block
.soft {
background: #e0e5ec; /* same family as the page */
border-radius: 16px;
box-shadow:
9px 9px 18px #bcc2c9, /* darker: light's shadow */
-9px -9px 18px #ffffff; /* lighter: light's source */
}
Offsets equal, blur about twice the offset, both shadow colors derived from the background (one darkened,
one lightened toward white). Flip the offsets negative-to-positive inward (inset) and the
element reads as pressed instead of raised — which is exactly how soft-UI toggle states are built.
Where it breaks people
- Edges below 3:1. A soft shadow is not a perceivable boundary under WCAG 1.4.11 — users with low vision, glare, or a cheap panel lose where the button ends.
- State told only by shadow. Raised vs pressed is a subtle cue that many users simply cannot see; if it's the only difference between on and off, the control is broken for them.
- Tone-on-tone text. Gray-on-gray labels inside soft elements routinely land under 4.5:1 — the aesthetic pulls text contrast down with everything else.
The rules that keep it usable
- Text is exempt from the aesthetic: full-contrast labels (4.5:1+) on every soft surface — softness lives in the shell, never the words.
- Never shadow-only state: pair pressed/raised with a second signal — accent color, icon change, or text — so state survives bad eyes and bad screens.
- Visible focus: a strong focus ring (3:1 against the background) for keyboard users; the soft edge cannot do this job.
- Reserve it for accents: cards, toggles, music-player controls — not entire information-dense interfaces. The style's charm is real but it's a garnish, not a layout system.
Generate it instead of eyeballing it
Getting the two shadow colors right — both derived from the background, believable light angle, matched intensity — is fiddly by hand. Our neumorphism generator computes the pair from your background color with distance, intensity, and light-direction controls, previews raised and pressed, and exports the CSS (plain or Tailwind). Pair it with the contrast checker for your label colors and you get the look with the ratios intact.