This page is in progress -
Why This is Important
Information that doesn't rely exclusively on color is accessible to colorblind people.
Color by itself is not a reliable way to convey information because colorblind people experience it in many different ways—the most common types being red-green and red-blue color blindness. Using visual attributes such as shapes, iconography, text, contrast, and spacing makes information accessible to colorblind people.
This references WCAG criterion 1.4.1 Use of Color (Level A).
How to Implement This
User Interface Elements
A colorblind-accessible interface starts at the design stage. Some common UI elements that use color include error states, online/offline status, selection, and navigation. It’s important to test these with a colorblind person and/or simulator at the design stage to catch issues early on.
Using a color palette generator that checks for colorblind accessibility (such as the Adobe Color Wheel) is a great start - however keep in mind that while that ensures the colors look different, the intended meaning they convey may not be clear.
In Federico Monaco’s Colorblind Accessibility Manifesto, he recommends the following rules for designing for colorblind folks:
- Start with “Why?”
- Don’t communicate only with colors
- Design with shapes
- Choose the right copy
- Test your designs in black and white
- Rethink button states
- Use contrast
- The smaller the item, the bigger the problems
- Less fancy, more usable
- More than you think (nearly 350 million are colorblind)
For example, in the non-colorblind view of the form below, the difference between red and green is obvious to non-colorblind people, but in the Protanopia view, they look almost identical. And while some people may be able to tell the difference, the subtle change might still lead to confusion and frustration.
In the new example, a green check mark and red exclamation point help emphasize the difference through icons. The error message “Passwords to not match” draws attention to and explains the error.
Another benefit to not relying solely on color is accounting for cultural differences in color. For example, in Western culture white is for weddings, but in some Eastern cultures white is traditionally for funerals. Conveying information through other means helps remove the guesswork of what the color meant to imply.
The same logic of this form design can be applied to many different types of UI elements. For example, adding an underline to a tab helps the current page stand out in the navigation. Adding text to colored labels that mark things “in progress” or “complete” help distinguish the labels more.
If you are worried about making your UI too cluttered with all the additional detail, you can consider only emphasizing elements that really require user attention. For example, if you have a list of users that are online and offline, add a green circle by the online users and no circle by the offline ones. Sometimes the presence of a shape rather than difference in color or shape is much more noticeable and easy to spot.
Creating colorblind-accessible data visualization is somewhat more complex because of the sheer amount of information that data visualization often conveys.
In Sarah L. Fossheim’s Intro to designing accessible data visualizations, they recommend 10 dos and don’ts to keep in mind:
- 🚫 Don't rely on color to explain the data
- 🚫 Don't use very bright or low-contrast colors
- 🚫 Don't hide important data behind interactions
- 🚫 Don't overwhelm the user with information
- ✅ Do use accessibility tools when designing
- ✅ Do use patterns and shapes in addition to color
- ✅ Do use labels and legends
- ✅ Do translate the data into clear language
- ✅ Do provide context and explain the visualization
- ✅ Do focus on accessibility during user interviews
Interesting further reading
- Types of Color Blindness
- 5 tips on designing colorblind-friendly visualizations
- Case Study: Implementing Accessible Data Charts for the Khan Academy 2018 Annual Report
How to Test This
Contribute and Give Feedback
If you would like to provide feedback or contribute content on this resource, please fill out the form below.