Using color accessibly involves making sure that there is enough contrast between the color of the text and the color of the background. Without sufficient contrast, content is inaccessible to users with low vision or certain types of colorblindness (e.g., red/green, green/brown, green/blue, blue/gray, blue/purple, and/or green/black).
General tips for using color accessibly
-
Use the WebAIM Color Contrast Checker to sample foreground (text) and background colors from any page or document to check whether the contrast is sufficient. Note that the UM System strives for compliance with WCAG AA, or WCAG 2.
-
It's best not to rely on color alone to convey meaning. Some recommendations:
-
Bold font, larger font, a callout box or border, and/or an icon or emoji. (Note that an image would require alt text, but an emoji does not.)
-
Labels to each section of a graph. Consider adding a pattern in addition to color.
-
Use italics sparingly, as large blocks of italicized text can be difficult to read.
-
Avoid using underlined text for emphasis, as it can be mistaken for a link. If you are conveying the title of a book or journal, it is now commonly accepted practice to use italics for these titles.
-
Avoid using primary red (hex code #FF0000; RBG 255-0-0) with white. If you want to use a shade of red, use maroon instead (try hex code #C00100, RBG 192-1-0); in Microsoft, this shade is available right next to primary red.
-
Avoid blue text, as students might expect that to be a hyperlink.
Using color contrast in Canvas
Users may turn on the high-contrast user interface within Canvas as needed. For content added to Canvas, the WebAIM Color Contrast Checker may be used to check for accessibility by comparing text and background colors. Please keep in mind that color use must meet WCAG 2.1 AA guidelines.
Using color accessibly in Microsoft 365
Microsoft has many tips for using color and contrast for accessibility in Microsoft 365. They provide several suggestions based on particular accessibility issues that may arise for individual users.
Using the WebAIM Color Contrast Checker
The WebAIM Color Contrast Checker may be used to check color contrast for many types of documents. You can either put in the Hex value for the particular colors you are using to check the contrast ratio or use the eyedropper tool in WebAIM's checker to sample colors from documents. For most text, contrast ratios must be at least 4:5:1 to meet WCAG 2.1 AA standards. If your text/background does not meet the required contrast ratio, you can use the sliders in the WebAIM checker to help you find colors whose ratio is accessible.
Using color accessibly at your campus
See Implementing accessibility skills: Color for more information on how to use your campus's color schemes accessibly.