Ensuring Basic Color Contrast for Accessibility

What Is Color Contrast?

Color contrast refers to the difference in lightness or darkness between text and its background. The higher the contrast, the easier it is for everyone to read, especially those with visual impairments. A good rule of thumb is to make sure that your text is easily distinguishable from its background without straining the eyes.

Why Color Contrast Matters

Color contrast plays an important role in making text readable for everyone, particularly for students with visual impairments, such as color blindness or low vision. When there isn’t enough contrast between text and its background, some students may struggle to read and understand your content. By ensuring good color contrast, you’re helping everyone engage fully with your materials.

How to Ensure Good Color Contrast

Use Dark Text on Light Backgrounds (or Vice Versa)
- A simple way to ensure good contrast is to use dark-colored text on a light background (like black text on a white background) or light-colored text on a dark background.
- Example: Black text on a white background is easy to read, while light gray text on a white background can be difficult for some students to see.
Avoid Similar Colors Together
- Avoid placing colors that are too similar next to each other, like light blue text on a light gray background. This lack of contrast makes it difficult for some students to read.
- Example: Instead of light blue text on a gray background, use navy blue text on a white or light background for better clarity.
Use Online Tools to Check Contrast
- There are free online tools, like the WebAIM Contrast Checker, that can help you see if your color combinations are accessible.
- Simply input your text color and background color, and the tool will tell you if the contrast is good enough to be readable by everyone.
- In Canvas, use the accessibility checking tool to evaluate color contrast along with other accessibility issues.

Examples of Good vs. Poor Color Contrast

Good Contrast

Black text on a white background

Yellow text on a dark blue background

Poor Contrast

Light gray text on a white background

Above: Light gray text on a white background

Pale yellow text on a light green background

Above: Pale yellow text on a light green background

Tips for Faculty

Keep It Simple: Stick to classic color combinations like black on white or dark blue on light yellow. You don’t need to worry about specific contrast ratios if you focus on making text easily visible.

Consider Your Audience: Remember that some students may have color blindness. Avoid relying on color alone to convey important information. For example, instead of just saying “the items in red are due soon,” consider adding a label like “the items in red (labeled ‘due soon’)” to ensure clarity for everyone.

What Can I Do Now?

Following the guidelines above will help you avoid color contrast issues that may make engaging with your content complex for some people. Consider the readability of each element as you create your pages—does the text stand out enough against the background? Is the content easy to read without straining? Use online tools like the WebAIM Contrast Checker or Canvas’ built-in accessibility checker to verify your contrast choices. These tools help confirm that your content meets accessibility standards and is accessible for all students to read. Consistently verifying color choices ensures everyone can easily access and engage with the material.