If you read the title of this article and immediately recoiled, we’ve got some good news: You can certainly use neutral colors in web design. In fact, there are many situations in which neutral colors are a much better option than bright hues.
But we’ve seen quite a few gray-and-black websites in recent years, and many of those designs make a common accessibility mistake: They aren’t designed for users with color vision deficiencies (also called color blindness) and other vision disabilities.
If you find yourself using a lot of grays, beiges, and browns, here’s what you need to know to make sure your designs are inclusive.
Color contrast is important, particularly for text
Web designers often have excellent vision and a good understanding of how different hues affect messaging. However, users aren’t a monolith — some of them have limited vision, some have devices with low-resolution screens, and some use low-brightness settings.
You want your content to appeal to all of those users. That’s where color contrast becomes critically important: If neutral text appears over a neutral background, some people will be left out of the conversation.
Fortunately, it’s easy to test for accessible color contrast. The Web Content Accessibility Guidelines (WCAG) requires most text to maintain a contrast ratio of at least 4.5:1, while large-scale text (and images of large-scale text) must maintain a contrast ratio of at least 3:1.
When measuring contrast ratios, be exact! Don’t trust your own perception of color. Tools like the a11y® Color Contrast Accessibility Validator quickly test content and color-pairs against WCAG, removing the guesswork.
Related: Designing for Color Contrast: Guidelines for Accessibility
User interface elements must also have appropriate contrast
Contrast is also important for user interface (UI) elements like buttons and form field indicators. In recent years, soft UI has become trendy, but those interfaces are usually designed for high-resolution screens.
Remember, not all users have high-resolution screens. Some users may miss interactive elements that fail to “pop out" from the background — and usually, this is because they’re using neutral colors for a cleaner look.
Once again, the solution is to test color-pairs against WCAG’s contrast requirements. You should also keep these tips in mind:
- Make sure that controls have accessible names and labels. Provide clear text instructions to ensure that users understand the interface.
- Test keyboard focus. Many people use a keyboard alone (with no mouse) to browse the internet. Make sure that focused elements are visually distinct and consider implementing custom focus styles.
- Don’t use color alone to guide your users. Read about how to avoid using color to convey information.
- Use an appropriate aesthetic for the situation. Neutral colors might make sense for a clothing e-store, for example, but if you’re building a mobile banking app, you’ll probably need clear, visually distinct hues.
Related: Accessibility Tips: Be Cautious When Using Autofocus
The goal of inclusive design is to help you grow your audience
Remember, web accessibility improves experiences for real users — it doesn’t limit your options as a designer. When you use color in an accessible way, you make your product more navigable, readable, and useful.
There’s a common myth that digital accessibility makes websites ugly, plain, or boring. Fortunately, that’s not true: Many of the internet’s most popular websites meet WCAG’s requirements for color, and more top brands are prioritizing universal design than ever before.
To learn more about the core principles of accessibility, download our free eBook: Essential Guide to ADA Compliance for Websites.
And if you’re ready to test your website for common accessibility barriers, get started with our free automated web accessibility analysis.
