User interface (UI) design is all about improving usability and keeping users engaged. Designers must create products that create immediate visual interest — but some recent UI design trends can introduce significant issues for many users.
“Soft" interfaces are trendy, fun, and potentially disastrous for people with vision disabilities. The Sft UI trend is closely associated with neumorphism, a design aesthetic that focuses on visuals with simple colors and careful use of contrast.
The name is a play on skeuomorphism, an aesthetic in which the UI recreates the look of real-world objects (such as calculators or stereos). In neumorphism, the goal is to create something entirely different and abstract. The designer’s goal is to keep the aesthetic consistent throughout the product by using the same low-contrast color scheme.
Within a Soft UI, each element seems to blend together seamlessly. From an accessibility perspective, this is problematic: Low contrast can make text difficult to read, and some users may not be able to identify interactive components.
Soft UI can be beautiful, but many designs introduce accessibility barriers
The Web Content Accessibility Guidelines (WCAG) addresses contrast for text in WCAG 2.1 Success Criterion 1.4.3, “Contrast (Minimum).”
That criterion requires that the visual presentation of normal text (and images of text) maintains a contrast ratio of at least 4.5:1. Large-scale text must have a contrast ratio of at least 3:1; incidental text and logotypes are exceptions.
Additionally, WCAG 2.1 SC 1.4.11, “Non-Text Contrast,” requires a contrast ratio of at least 3:1 for all active user interface components and graphical objects (parts of graphics required to understand the content).
Following these criteria benefits a wide variety of users:
- People with severe vision disabilities will be able to read text with screen magnifiers or other assistive technologies.
- People with color vision deficiencies (also called color blindness) can understand content without changing their device settings.
- People with cognitive disabilities can recognize and operate controls.
- People can operate content when browsing on low-resolution screens or in places with bright ambient light.
Unfortunately, many Soft UI designs don’t meet WCAG’s minimum contrast thresholds. For designers, that may make some degree of sense: Soft interfaces are often designed for high-resolution screens (such as current-gen smartphones).
On those screens, interactive elements may pop out against the background — but on low-resolution devices, that may not be true.
And when text is unreadable, users may not understand how the digital product operates. That’s opposed to the primary goal of UI design: Create interfaces that work for every type of user.
Related: Inclusive Design Starts with Accessibility
Soft UIs can be accessible, but designers need to think about their users
It’s certainly possible to build an accessible Soft UI. We simply need to expand our definition of “soft,” just slightly, to meet WCAG’s contrast requirements.
When designing interfaces, keep these tips in mind:
- Choose a design aesthetic that’s appropriate for the case. If you’re developing a mobile game, a Soft UI might make sense — if you’re developing a mobile banking app, not so much.
- Don’t use color alone to identify controls. Learn how to use colors in an accessible way.
- Check your colors against WCAG before including them in your product. Use the a11y© Color Contrast Accessibility Validator to evaluate individual color-pairs.
- Don’t forget about people who use screen readers (software that outputs text as audio or braille). Make sure that controls have accessible names, labels, and clear instructions to ensure that they’ll work with every type of assistive technology.
- You can offer alternative UIs to accommodate more users, but the default UI should be accessible. Learn why offering a dark mode doesn’t satisfy WCAG requirements.
- Test keyboard focus. Consider implementing custom focus styles to ensure that interactive elements have appropriate contrast when receiving focus.
Remember, the goal of digital accessibility isn’t to restrict your creativity. Many of the most popular mobile apps and websites meet WCAG’s Level AA requirements — and when you understand the importance of contrast, it’s easier to make user-focused decisions.
To make the process easier, download the Easy Guide to Accessible Colors, our one-page “cheat sheet" for accessible color usage.
