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.

back to top

Connect with the Instructional Accessibility Group

Improve your instructional accessibility through the IAG live trainings, access checks for individual materials, or course reviews.

Have more questions or need additional assistance? Email the Instructional Accessibility Group.