Color Contrast

Related Guidelines:¹ WCAG 1.1.1, WCAG 1.4.11

Whenever possible, we encourage you to use a color contrast checker tool, such as WebAIM’s Color Contrast Checker and Adobe Color. In addition, there is a color contrast checker built into the Canvas Accessibility Checker.

This is because certain color combinations can make it difficult for some learners to distinguish elements on a page, as there is not enough contrast between the background and the foreground (e.g., text, images, buttons, forms, and other elements on the page). Ensuring high contrast within a document can make it easier for some students to read it.

Hex Color Codes

Color contrast checkers often require hex codes of the colors ²; for example, WebAIM’s Color Contrast Checker Tool. It is a simple process to find the hex code if it is made available in the tool itself, such as when you are checking the colors of:

• Digital text and background colors in a Word document or PowerPoint slide:
  How to find the hex color values in Microsoft Products
• Digital text and background colors in a Google Doc (skip to the Create a Custom Color Section): Change the Color of Text, Objects, and Backgrounds

However, there are times when the hex code is hard to find. For example, imagine you are trying to get the hex code of a color on an external website. In that situation, you can use a browser extension such as Accessible Color Picker.