Creating Accessible Color Contrast

A strong color contrast between text and background on every document, presentation and Canvas page ensures that text can be read by all students in your courses. If you are not sure whether your text and background colors have adequate contrast, you can compare the two colors using a color accessibility checker. 

• Make sure your colors have strong contrasts between them. The Web Content Accessibility Guidelines (WCAG 2.1) specify different contrast ratios depending on the size and weight of the font text, 3:1 for normal text less than 14 points, or 4.5:1 for 14-point bold or 18-point non-bold text.

• Use a color contrast checker to ensure you have the correct ratio of brightness to darkness as described by the Web Content Accessibility Guidelines (WCAG 2.1) for specific different contrast ratios depending on the size and weight of the font text.

• Never use color alone to show emphasis; always combine color plus boldface or font size to communicate important information. Students with color blindness or low vision may not be able to distinguish color alone.

• Do not use blue underlined text for color contrast as blue underlined text can be confused for hyperlinks.

• For non-text graphics, use color plus shape, color plus size, color plus texture or pattern to visually distinguish information differences. See the figure below for an example.

• Chrome Extension. (2020). Color contrast analyzer. Retrieved from https://chrome.google.com/webstore/detail/color-contrast-analyzer/dagdlcijhfbmgkjokkjicnnfimlebcll?hl=en 

• Microsoft Office Support. (2020). Use more accessible colors and styles. Retrieved from https://support.office.com/en-us/article/video-use-more-accessible-colors-and-styles-in-slides-65c8c964-9449-4b5f-88ea-e226abd68337 

• Web Accessibility in Mind (WebAIM). (n.d.). Contrast and color: Understanding WCAG 2.1 contrast and color requirements. Retrieved from https://webaim.org/articles/contrast/ 

• Web Accessibility in Mind (WebAIM). (n.d.). Contrast Checker. Retrieved from https://webaim.org/resources/contrastchecker/