Data Visualization Toolkit: Color Accessibility Tips

Map icon

Color is critical in displaying data. It can be used to grab the viewer’s attention, and strategic use of color ensures the viewer concentrates on key information. Color also helps in retention because it evokes emotions and links the viewer to memories. Therefore, color choices should always be intentional.

Color Accessibility Tips

  • In general, avoid using color-coding as the only means to convey information. However, if you do choose to use color differences to convey information, make sure that the information conveyed by the color differences is also conveyed explicitly in the text.
Incorrect
Incorrect example of conveying information
Correct
Correct example of conveying information
  • Make sure that there is at least a 4.5:1 contrast ratio between foreground and background colors in order to make the content accessible to audience members with color blindness. You can even use this interactive Contrast Checker to help you determine your ratio.
  • Avoid traffic light (yellow-green-red) color schemes. Green and red are indistinguishable for people with red-green color-blindness. See Stephanie Evergreen’s blog for more information.
  • Keep in mind that while some links may be visually evident from page design and context, such as navigational links, links within text are often visually understood only from their own display attributes. If the only attribute that sets your link apart from the rest of the text is color, people who cannot perceive color may be unable to notice it. To avoid this, make the link bold and/or underlined, to set it apart.

For more information on accessibility in color choices see the Diagram Center’s Image Description Guidelines and the Social Security Administration’s Color and Contrast checklist for 508 accessibility.