Step 6: Use High-Contrast Colors to Support All Users

Watch the Video

Video Transcript

USE HIGH-CONTRAST COLORS

While color is a powerful tool in your toolbox, it can present accessibility concerns for users with visual disabilities. Color contrast is of particular importance for accessibility.

Contrast refers to the luminance (brightness) difference between background colors and foreground colors. For instance, the section headings here have a background color of Ball State red   and foreground color of white  . This relationship is generally expressed in a ratio ranging from 1:1 (the same color for both) to 21:1 (black and white). You may also see these written as numbers, removing the :1 at end as shorthand. Later, we'll look at how to find this color contrast ratio and what colors in Canvas are high-contrast vs. low-contrast.

Contrast is critical for accessibility, as many users with otherwise good vision can have trouble distinguishing low-contrast colors (even those not diagnosed with color blindness). If you've ever tried to read something and struggled with it, you know how frustrating poor visibility of text can be.

The minimum WCAG standards for color contrast Links to an external site. require small text such as body text have a 4.5:1 contrast and large text such as section headings have a 3:1 contrast. However, the WCAG standards also include enhanced color contrast Links to an external site., of 7:1 for small text and 4.5:1 for large text. We highly recommend your contrast at least meet these stricter levels. For instance, the contrast of the section headings in this course are 6.6:1. While this may cause perception issues on small text, it is more than high enough for large text.

The Canvas Accessibility Checker does check for body text contrast, but it does not check for section heading contrast or other important visual elements. For these, you'll need to manually check color contrast, a topic we'll be covering more in the next page.

PAIR COLOR WITH OTHER ELEMENTS

Color should not be used as the only method of conveying a particular piece of information. If you are using color for communicating information (anything non-decorative), it should be accompanied by other elements, preferably both a visual element for sighted users and a textual element for non-sighted users.

For example, consider this representation of water temperatures on the Celsius scale:

• Below 0 °C
• 0 °C – 100 °C
• Above 100 °C

Here, color is covering information about the state of water at these temperatures. Instead, we could add both visual and textual elements to make this more understandable by all users.

• Below 0 °C: Water in Solid State 🧊
• 0 °C – 100 °C: Water in Liquid State 🌊
• Above 100 °C: Water in Gas State 💨

Pairing color with other elements is particularly important if you are color coding parts of your syllabus, modules, or course schedule. For example, if you use color to designate Monday, Wednesday, and Friday assignments, try to use a shape for each and a letter (M, W, F) along with the color. Doing so ensures that all users, regardless of visual ability, have easy access to the same level of information.