Color Contrast Guidelines

Color Contrast Guidelines

From documents and webpages to graphs and closed-captions, color contrast is an important facet of creating any accessible content. These guidelines will help you create colorful content that is still accessible to all.

General Knowledge

• Avoid color combinations that can create accessibility issues for people with color blindness.
  • Red and green; blue and yellow; purple and orange.
• The color contrast ratio of the text to background needs to be 4.5:1 to met Web Content Accessibility Guidelines.
  • A ratio of 1:1 would be white on white while a ratio of 21:1 would be white on black.

Choosing Appropriate Colors

• The best contrasts exist between dark colors on light backgrounds. Using bright colors against a bright background however, creates a contrast problem.
• This does not mean colors are chosen based solely on contrast. Aesthetics are important too. While aesthetics can add flair and personality, avoid these choices:
  • Using black as a background. A black background makes it easy to select contrasting text, but it also creates issues when switching from a black background to a lighter one in the same presentation. Also, some studies indicate black backgrounds are tougher for folks with certain vision differences such as astigmatism.
  • Using Yellow or Red for text color:
    • Yellow text can contrast well with darker backgrounds, but it is no fun to read and cannot be paired with blue as is causes issues with color blindness.
    • Bright red text is hard to contrast as red on white has a ratio of 3.99:1

Checking Contrast

• WebAIM, Web Accessibility in Mind, has a very robust contrast checker using the color hex codes. This contrast checker tool is also available as a bookmarklet for use anywhere on your screen.
  • To manually locate the hex code for a color in Microsoft Office: Expand the text color drop down, select More Colors. The Colors pop-up window will open; select the Custom tab to choose any color and read its RBG values and hex code.
  • To manually locate the hex code in Canvas: Select the paint palette icon to choose any color and see its RBG values and hex code.
  • WebAIM also offers guidance on Evaluating Contrast with Chrome DevTools
•  ColorZilla has a downloadable eyedropper tool that allows you to select colors from anywhere in your browser and copy the value to your clipboard.