Neumorphism, done accessibly
Soft UI that people can actually use.
Neumorphism looks calm and tactile, and it's famous for being hard to read and hard to use. Here's where it came from, exactly what goes wrong, how to fix it, and which kits and tools are worth your time.
This whole site is soft UI
Every surface here uses a light and a dark shadow, and every text color passes WCAG AA. It can be done.
Try it
Tab to each control to see the two-color focus ring. The toggle says On or Off in words, and tells screen readers with aria-pressed, so nobody has to spot a pressed-in shadow.
What goes wrong, in brief
-
NN/g: low contrast isn't accessible
Nielsen Norman Group says neumorphism's low contrast doesn't give elements enough visual weight, which makes the experience inaccessible.
-
NN/g: hard to tell what's clickable
NN/g also says it's hard to tell what you can click, because the same raised look often gets applied to both clickable and non-clickable elements.
-
A drop shadow isn't its own boundary
When measuring non-text contrast, W3C treats a 3D drop shadow as part of whichever nearby color it's closest to in brightness. It doesn't count as a separate edge.
New kits, reviewed
A short email when a soft UI kit or tool is worth a look, with how it handles contrast and focus.
The list isn't hooked up yet, so this won't send.