Neumorphism: can we make it more accessible?

2020’s hottest UI trend meets practicality.

“Neumorphism” is a new slang term in design circles — co-created by Michal Malewicz — which essentially crosses the words “new” and “skeuomorphism”.

Essentially, it’s a new, minimal way to design with a soft, extruded plastic look. It’s almost as if the interface has been vacuum-formed. And let’s just get it out the way right now: it’s dividing opinions.

I personally like the look and think it brings a fresh new challenge to UI designers and front-end developers everywhere.

One of those challenges, of course, is accessibility.

A thermostat concept by Andrew Millen on Dribbble

Conventional buttons tend to stand out quite well, with borders clearly defined and a focused state different enough to the unfocused to be enough that a user will know they’ve performed an action.

However, if we look at neumorphic buttons, we could run into an issue.

Borders are not easy to see and blend in with the background. While this is part of the charm of neumorphism, it also makes it harder to use.

Neumorphic buttons without any sort of border, it naturally blends into the background

Another issue is what to show when the button is pressed. The indented effect may not be enough on its own and may leave users wondering which state is on or off.

Watch shop concept by Dawid Tomczyk on Dribble

These issues can have quite elegant solutions though.

Firstly, with the border, we could introduce a 'lip' to it, like on real buttons which has a slightly lifted edge all around. This gives the button a more defined edge, while not taking away from the neumorphic charm. This should make it easier for people to judge where the button begins and ends.