Color Contrast

Take the Challenge

Learn more and sign up to participate in the Mission: Accessible challenge.

Make an Impact in 5 Minutes...

Fixing color contrast issues should not take long. Ideally, you'll always use dark text on a light background or light text on a dark background. When you have a few minutes, identify a few pages at a time where you use colored text on a colored background. Then take the following steps:

Run the built in accessibility checker in Canvas’ Rich Content Editor
Focus on the color contrast issues and follow the instructions to make any corrections the checker indicates are needed

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.

Impact

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

Create images, text, and tables as you normally would inside Canvas.
If you have incorporated color in the text or a table ensure that the colors are distinct so that text is readable.
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

Avoid using colored text that isn’t readable against a background color
Avoid using images with text on them that do not have sufficient color difference
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.
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.