This page is in progress -
Why This is Important
Information that doesn't rely exclusively on color is accessible to colorblind people.
Blind and visually impaired people use screen readers to interact with websites and apps. A screen reader is a type of assistive tech that converts things on screen to audio and/or braille. It's important that things are understandable and interactive to screen readers.
Keyboard accessibility is essential for people who do not use a computer mouse (which might be because they have unpredictable or very specific movement due to a motor disability). Many Blind and visually impaired people also use keyboard interactions in order to use their screen reader.
Error support is accessible to people with a diversity of disabilities. A cognitive disability might affect how a person perceives and understands things. A physical disability might lead to unpredictable movement. Other factors such as environment, stress, and multi-tasking may also lead to errors.
In order to be accessible, gestures and interactions must account for people with physical and motor disabilities, who might have unpredictable or very specific movement.
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).
Level AAA compliance is considered more difficult to meet because it requires more resources to fulfill. It also might encompass conflicting access needs (meaning what is accessible to some might be inaccessible to others). Use your best judgment of your target audience and your team's capabilities to determine if this is a pragmatic goal to reach.
How to Implement This
User Interface Elements
Make sure to design colorblind accessible components from the start. 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 is 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 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
- To start, use a colorblind simulator to experience the content in different versions of colorblindness.
- Make note of anything that's confusing or difficult to understand. Pay special attention to status indicators, buttons, charts/graphs, and navigation.
- Recommended to do user testing with colorblind people.
Some colorblind simulators:
Contribute and Give Feedback
If you would like to provide feedback or contribute content on this resource, please fill out the form below.