The contrast problem
Beautiful, until someone has to read it.
What WCAG 2.2 requires, and exactly where typical soft UI falls short.
Measured
The numbers behind "low contrast"
- Light gray text
#a3b1c6on a#e0e5ecsurface measures 1.72:1. Normal text needs at least 4.5:1. - This site's own dark shadow,
#b3bdcc, is only 1.56:1 against its surface. That's why the shadow can't be the only thing that shows where a button is.
Ratios calculated with the WCAG relative luminance formula.
What WCAG 2.2 asks for
-
WCAG 1.4.3: text needs 4.5:1
WCAG 2.2 Success Criterion 1.4.3 (Level AA) requires at least 4.5:1 contrast for text and images of text. Large text, meaning 18 point or 14 point bold, needs at least 3:1, and W3C says not to round results up (4.499:1 fails).
-
WCAG 1.4.11: controls need 3:1
WCAG 2.2 Success Criterion 1.4.11 (Level AA) requires 3:1 contrast against adjacent colors for the visual information needed to identify user interface components and their states. Inactive components are exempt.
-
Selected and focused states count too
Under 1.4.11, the visual cue that shows a state, like selected or focused, also has to meet 3:1. That would apply to a neumorphic pressed look when it's the only visual sign of a toggle's state.
-
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.
-
A clear label can stand in for a border
1.4.11 doesn't require a visible button boundary if the control has other visible content, such as text or a high-contrast icon, that shows it's there. A boundary is required only when nothing else identifies the control.
-
WCAG 2.4.7: focus must be visible
WCAG 2.2 Success Criterion 2.4.7 Focus Visible (Level AA) requires a visible keyboard focus indicator. W3C notes that without one, sighted keyboard users can't operate the page.
-
WCAG 2.4.13: size and contrast of focus
Success Criterion 2.4.13 Focus Appearance is Level AAA. The focus indicator must cover at least the area of a 2 CSS pixel thick perimeter around the unfocused component and change contrast by at least 3:1 between focused and unfocused states.
-
Outer shadows don't set the size
For 2.4.13, W3C says a component's outline is based on its content, border and background. Shadow and glow effects outside the component don't count, so a soft outer shadow doesn't add to the area the focus indicator is measured against.
-
WCAG 1.4.1: don't rely on color alone
WCAG 2.2 Success Criterion 1.4.1 Use of Color (Level A) says color can't be the only visual way to convey information, indicate an action or distinguish an element. W3C suggests adding shape or text.
What designers say
-
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.
-
Too few ways to show states
CSS-Tricks points out that neumorphism's constraints make it hard to style every state a control needs, like hover, active, focus, error, success and disabled. The differences end up too subtle to cover them all.
-
Malewicz: low contrast is a choice
In a 2021 follow-up, Malewicz argued that low contrast is the main complaint about styles like neumorphism, but it's a design choice rather than something built into the style.
Source: UX Collective, Michal Malewicz, Accessibility vs Design trends (a Medium member story)