How do I Adjust Color Contrast with the Accessibility Checker?
You will learn how to use the Accessibility Checker to verify the color contrast you have in your Page. The CSU requires a 7:1 contrast ratio to ensure that even students with some low vision can still readily read your instructional content. Canvas uses WGAC 2.0 which only requires a 4.5:1 ratio.
Canvas Accessibility Checker Rules:
- Text smaller than 18pt (or bold 14pt) should display a minimum contrast ratio of 4:5:1.
- Text larger than 18pt (or bold 14pt) should display a minimum contrast ratio of 3:1.
- Text is difficult to read without sufficient contrast between the text and the background, especially for those with low vision.
1. Click on Edit for your Page.
Tip: These steps will work for the Accessibility Checker in all Rich Content Editors in your course, meaning for: Pages, Announcements, Assignments, Discussions, Classic Quizzes, and Syllabus.
2. Note some use of color in the text within the Rich Content Editor.
3. Click on the Accessibility Checker.
If you have any accessibility issues, the Accessibility Checker will display how many were detected.
In the example below, we see four accessibility issues were detected.
4. Note that the Accessibility Checker highlights the area addressed and offers advice.
Tip: The Accessibility Checker offers the chance to easily fix some issues.
5. Click on an area of the color chart in the Accessibility Checker.
Since the first text selected has light text and a light background, the change that you need to make is to either darken the text (maybe to black) or darken the background. However, this color change only affects the color of the text, not the background.
You will notice the following below:
1. The current location of the color cursor that is displaying inaccessible colored text.
2. The suggested location that will ensure your text will become accessible (for this example).
6. Click on Apply button to resolve the particular issue.
Once you have chosen a new text color, you will notice the dark blue "Apply" button will go from not clickable (grayed out) to clickable (in color).
Tip: The Apply button will become clickable when you move the color cursor to an accessible font color.
In the example below, since it is a light background, it is suggesting a dark font color.
Alert: Before moving on to the next issue, you must click on Apply to save the resolved issue. If you do not click on Apply and move on, your issue will still stay.
After successfully adjusting your font color and selecting Apply, you will now notice the following:
1. The issue count has decreased (in this example it has gone down from four to three).
2. It automatically has moved on to the next issue.
7. Click on the Next button to go to the next issue.
If you have numerous issues detected by the Accessibility Checker, you can click on "Next" to skip some issues and come back to them.
8. White colored text works well with a dark background.
Since the text is dark and the background is dark, it is good to choose a light color.
9. The Accessibility Checker now shows that there are no other issues.
Once you go through all of the issues and resolve the issues, you will be greeted with the image below.
10. Exit out of the Accessibility Checker Sidebar Menu.
You have two methods of clearing the sidebar menu.
1. Click on the small "X" in the top right by the area that displays "Accessibility Checker" and "No accessibility issues were detected."
2. On your computer keyboard, you may press the "Esc" key (the Escape button found on the top left of your computer keyboard).
11. Click on Save or Save & Publish.
Note: You may have to exit out of the Sidebar Menu first if you are having difficulty finding the Save or Save & Publish buttons.
Alert: You must either click on "Save" or" Save & Publish" to ensure you have saved your progress after using the Accessibility Checker to remediate the accessibility issues.
Pages, Assignments, Discussions, and Classic Quizzes will display "Save & Publish" or "Save."
Syllabus will display "Update Syllabus."
Announcements will display "Publish."
12. The page now should be easily read by students that have difficulty reading text with different color fonts.
Video Demonstration
Related Guides
Article Summary
You have now learned how to remediate text contrast issues in the Rich Content Editor by using the Accessibility Checker and Sidebar Menu.