Skip to main content

Color Contrast

Contrast and color use are important, as users must be able to perceive content on a page. You can use accessibility checkers to check for issues such as color contrast ratios. If you choose to use color, you should ensure adequate color contrast, at least a 4.5:1 contrast ratio between the text and background  and accessibility friendly colors.


Users should be able to scan a page to find its content. Having a difference between colors helps users to find and understand content. Text should have a sufficient color difference from the background to make the text readable. Also, color should not be the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. When that is the case, color blind or low vision users may not be able to access the information.

How To

  1. Create images, text, and tables as you normally would inside Canvas.
  2. If you have incorporated color in the text or a table ensure that the colors are distinct so that text is readable.
  3. To test your color contrast. The built-in Canvas accessibility checker will tell identify when there is a contrast issue. To find the exact ratio, you can use a tool such as the WebAIM contrast checker. The contrast ratio needs to be at least 4.5:1 (normal text) or 3:1 (large text).

Things to Avoid

  1. Avoid using colored text that isn’t readable against a background color
  2. Avoid using images with text on them that do not have sufficient color difference
  3. Avoid using color as the only way to signify a change or that something is important. Add an asterisk or something similar as a secondary means of signifying importance.
  4. Avoid using an underline as a secondary way to signify change along with a color change, for some this could be mistaken for a hyperlink.

Moving Forward

As you create new Canvas pages or course websites, keep color contrast in mind when creating colorful elements or incorporating images including text. If you have a question as to whether or not the color contrast you are using is sufficient, use the WebAIM contrast checker to check. Using sufficient color contrast during design is easier than looking for potential issues on a finished product.