neumorphism accessibility contrast
Neumorphism became one of the styles most criticized by accessibility experts since it gained popularity in 2019-2020, and the reason is structural, not an implementation detail: the style's very concept depends on the element sharing nearly the same color as its background, distinguished only by subtle shadows, which is the opposite of what WCAG recommends for identifying interactive elements.
Regardless of the neumorphic shadow, keyboard focus needs its own high-contrast indicator, never rely on relief alone.
Reserve the style for secondary controls and keep critical actions (purchase, submit, delete) in traditional high-contrast components.
The effect is only visible when there's something behind the element to blur, an image, gradient or vivid color. Over a flat, uniform background, blur has nothing to work with and the result reads as just a semi-transparent solid color. Use this tool's preview with one of the vivid backgrounds to see the real effect.
Not automatically, but in practice most "pure" implementations (with no other contrast indicator) fail criterion 1.4.11 on the first test. It is entirely possible to pass an audit by combining the effect with borders, icons or color changes that guarantee the required 3:1 independently of the shadow.
Usually worse, dark screens tend to have less available luminance range to differentiate a light shadow from a dark one without looking artificial. If applying neumorphism in dark mode, test the shadow intensity specifically for that theme, do not assume the value calibrated for the light theme works the same way.
The most common recommendation is to increase the luminance difference between element and background (not leave them nearly identical) and always pair the effect with a second visual signal of interactivity, it is a hybridized version, not the "pure" neumorphism from the original 2019 explorations.
backdrop-filter has good support in modern browsers, but always include the -webkit- prefix for Safari and handle missing support with a solid fallback background.
.glass {
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}CSS is generated locally in your browser.