Colors

To create content with accessible colors:

  • Ensure contrast between foreground and background colors for 18 pt font and smaller is 4.5:1
  • Ensure contrast between foreground and background colors for 18 pt font and higher is 3:1
  • Avoid using color alone to convey information
  • Avoid using Red and Black or Red and Green color combinations
  • Ensure text on images has enough color contrast
  • Use the tools available to check color contrast and simulate color blindness

Contrast between foreground and background colors

Screenshot comparing inaccessible text that has low contrast to text that is accessible with high contrast.

Watch this video on accessible colors:

Download Accessible Colors

External Resources

Color Contrast Checkers

  • Colour Contrast Analyser: This free application, available in Windows and Mac versions, makes it easy to check foreground & background color combinations. Both versions include an eyedropper tool for easily grabbing a particular color from anywhere on the screen.
  • WCAG Contrast Checker for Firefox: This Firefox extension displays color contrast ratios in a sidebar, and flags the color combinations that fail WCAG contrast requirements at various levels.
  • WebAIM Color Contrast Checker: This handy online tool includes a feature to “lighten” or “darken” existing colors until you find a combination that meets WCAG 2.0 requirements. This functionality is also built into the WAVE Extension.

Color Blindness Simulator

  • Venngage – Color Blind Simulator: This free tool is a great way to get started with visualizing color blindness on a design. However, it is primarily used for websites, so someone who works with one will be able to see whether it has enough contrast for color blind users.
  • Coolors – Palette Generator: While this is not a perfect tool, the palette generator from Coolors can randomly choose multiple colors that can be checked for color blindness by clicking the glasses icon in the toolbar. There is room for a color to be removed, locked, and changed. It will also show contrast against black and white, display its various shades, and detailed color information.