Don't use color alone to convey information (colorblind)

Design
Styles
Visual
Level A
Semi-Automated Test
Examples of accessible and inaccessible use of color
Image description: Accessible and inaccessible comparison of use of color. The accessible example includes a vertical list of different colored rectangle characters (purple, blue, and pink) with circles next to them. The purple and pink characters have green filled circles, while the blue character has a blank circle with text that says, "Last seen 5 min ago." The inaccessible example looks almost the same, except the blue character has a red circle with no text. The difference between red and green are not noticeable for certain types of colorblindness.

This page is in progress -

If you would like to contribute or make a case to prioritize this page, please fill out the form below.
Why This is ImportantHow to Implement ThisHow to Test ThisCreditsContribute and Give Feedback

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.


Comparison of inaccessible form design using just red and green to show success and error
Image description: A side-by-side comparison of a non-colorblind and protanopia (red/green) view of a form to create a new password. In the non-colorblind version, the “New Password” text input is highlighted in green and the “Confirm New Password” input in red. In the Protanopia version, both inputs are subtly different shades of bronze.

‍

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.


Comparison of accessible form design using color, icons, and text to show success and error
Image description: A side-by-side comparison of a non-colorblind and protanopia (red/green) view of a form to create a new password. In the non-colorblind version, the “New Password” text input is highlighted in green with a checkmark icon next to it and the “Confirm New Password” input is highlighted in red with an error icon and text that says, “Passwords do not match.” In the Protanopia version, the colors look similar but the icons and text are still visible.

‍

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.
‍

Data Visualization

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

‍

‍

How to Test This

Manual Test
Semi-Automated Test
Automated Test
  • 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:

Credits

No credits yet. But this could be you!

Colorblind Accessibility Manifesto submitted by Federico Monaco

Contribute and Give Feedback

If you would like to provide feedback or contribute content on this resource, please fill out the form below.

Thank you, your submission has been received!
Oops! Something went wrong while submitting the form. Please check your internet connection and try again.

If you continue to encounter issues, please reach out to alexyingchen(at)gmail.com.