Build Better Color and Color Contrast

We frequently use color to emphasize content and to convey meaning. However, this meaning can be lost if a person has sight disabilities such as color blindness. We need to be careful with our color use to ensure each color stands out from other colors (color contrast), that it is easy to read text when it is overlaid on a color background in uses such as charts and maps.

Accessibility Interactions

  • Color as content and color blindness: Using color to signify information, such as green and red for open and closed, can actually hide this information for multiple reasons. First, assistive technology cannot "see," thus cannot verbalize information offered only by color. In turn, patrons with color blindness may not be able to differentiate between colors.
  • Low contrast: Low contrast combinations, such as white on gray, can be very difficult for patrons with low sight and dyslexia.

Best Practices

  • Do not rely on color to convey meaning: Use words as well as colors to convey meaning to ensure web content is understood as easily without color as it is with color.
    • On availability charts, such as those used for room reservations, use pattern as well as color to convey meaning. For example, green with no pattern for available and red with striped pattern for unavailable.
  • Test color and contrast combinations: The WAVE tools allows you to not only scan for errors, but also test specific low-contrast color combinations. Specialized tools are available to help you visualize your page with color blindness.
  • Resources below can help you see how your color combinations will be perceived by someone with color blindness.

Testing

  • Contrast testing: In the WAVE tool, select the "Contrast" tab to view any existing page color errors. Click each error icon to see where on your page the errors reside. To test color combinations in advance, WebAIM offers a web-based color contrast checker.
  • Color combinations: The Colorblind Web Page Filter allows you to see how your webpage would be perceived by people with varying types of color blindness. Ensure your page elements are differentiated for all sight types.

Video Tutorial

How to check for sufficient color contrast, and why it’s important. [Open Captioned video 3:40 min] From the ADA National Network.

Also watch: Use of Color Alone to Convey Information [Open captioned video 5:14min]: What to think about when using color to convey information.

Learn More...

  • Designing for Color Blindness: This WebAIM tutorial provides examples of how color blindness impacts one's sight as well as possible solutions.
  • Color Safe: Empowering designers with beautiful and accessible color palettes based on WCAG Guidelines of text and background contrast ratios.