When you’re developing a mobile application, the ways that you use color can have a profound effect on your audience. You want your app to be visually engaging — but you don’t want to create barriers for users with disabilities.
That’s an especially important consideration when you’re making decisions related to color. The Web Content Accessibility Guidelines (WCAG) are the international standards for digital accessibility, and WCAG’s requirements for color can be applied to mobile software. Below, we’ll explain how to build a more accessible app by avoiding common mistakes.
Don’t use color alone to convey information.
Some people cannot perceive certain colors. In fact, color vision deficiencies (also called color blindness) affect about 300 million people worldwide — and if your app directs users to “click the red button,” you’re leaving some people out of the conversation.
WCAG 2.1 Success Criterion (SC) 1.4.1, “Use of Color,” provides a basic pass-or-fail rule to keep in mind:
Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
That doesn’t mean that you cannot use color for effect. A big, red button might help some users understand that you want them to press it — but color alone shouldn’t be the only visual cue.
Hyperlinks are a great example. Most hyperlinks appear in bright blue, but they’re also underlined, which shows their purpose to people who cannot perceive color.
When reviewing your app’s design, ask yourself whether everything would make sense if you completely removed color. If not, you’ll need to find other ways to visually highlight important content.
Related: Use of Color for Accessibility Explained
Test color contrast for all themes (including dark modes).
Color contrast refers to the difference in light between text and its background. People with vision disabilities may have difficulty reading low-contrast text — that’s also true for people who open your app in bright sunlight.
WCAG 2.1 SC 1.4.3, “Contrast (Minimum),” sets the minimum requirements for contrast ratios:
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1.
This criterion also defines a separate 3:1 contrast ratio requirement for “large-scale text" of 18pt or larger.
While you may use larger fonts in your content, it’s important to remember that some people will use your app on small screens. For that reason, the best practice is to meet the WCAG requirement for normal text.
You should test color contrast for all supported themes. The Bureau of Internet Accessibility provides a free tool, the A11y® Color Contrast Accessibility Validator, which can be used to test individual color-pairs.
Finally, remember that you cannot fulfill WCAG’s color contrast requirements by providing a dark mode. While dark modes are helpful for many users, they can also introduce accessibility issues — your default theme still needs to follow WCAG.
Related: Designing for Color Contrast: Guidelines for Accessibility
Don’t depend on high-contrast settings for WCAG conformance.
iOS has a helpful “Increase Contrast" setting, while Android’s “High Contrast Text" option serves the same purpose. Both settings increase text contrast on the operating system level — and if possible, your app should support these settings.
However, some users may be unaware of high-contrast options, and you shouldn’t require users to change their system settings to use your app.
Related: Dark Mode Can Improve Text Readability — But Not for Everyone
Avoid remediating color contrast issues after-the-fact.
If you wait until your app launches to think about accessibility, you’re making your job much harder than it needs to be. Remember, mobile app update cycles are important for app store optimization (ASO) — pushing out too many quality-of-life improvements could affect your app store ranking (and frustrate your users).
Additionally, when you plan for accessibility from day one, you’ll write cleaner, simpler code and provide all users with a more predictable experience. That can mean higher user retention rates and lower long-term development costs.
To learn more about WCAG and how it relates to mobile apps, download our definitive checklist for mobile accessibility.
