Why Use Color?

Using colored or highlighted text in your course can be a good way to break up content or add emphasis to deadlines and other important information. While it’s perfectly acceptable to do so, keep in mind there are right and wrong ways to use color in regard to accessibility. 

How to Use Color Accessibly

Color Contrast

“Color Contrast” refers to the contrast between the color of the text (or page element) against the color of the background. This is especially important for users with colorblindness, as their perception of color may be different than someone without any visual impairments. Because there are several types of colorblindness, we never truly know what a student might be seeing when they view our courses. Therefore, we abide by the contrast ratio set by the Web Content Accessibility Guidelines (WACG), as it ensures readability across all types of colorblindness!

Notice how the color of the text in the image above is easily readable against the background. A general rule of thumb is to always use light text against a dark background or dark text against a light background.

The example on the left in the image above is very hard to see even without any visual impairments and might even be completely impossible to read for someone with colorblindness. The example on the right might look more passable, but that shade of red doesn’t quite meet the acceptable ratio.   

Using UDOIT to Fix This Issue

UDOIT is a tool made by the Center for Distributed Learning at UCF that can scan your entire course for accessibility issues. It also allows you to fix many of those issues yourself! You can access UDOIT by going to Faculty Tools. 

This is what a Color Contrast error looks like in UDOIT: 

Once you open the error by clicking on “Review,” it looks like this: 

There is a Preview box on the right that displays the error, the colors for the background and text on the left, and a box that displays the contrast ratio on the bottom. Don’t worry too much about the science behind the exact number – all you need to do is make sure that box comes out green. 

You can click on the arrows beside the color fields to darken or lighten the hue until the ratio is valid, or click on “Show Color Picker” to manually select a color. Then, hit the “Save” button, and now your colored text is accessible! 

Color As Emphasis 

When using colored text, it’s also important to make sure you bold or italicize that text on the page. This is because assistive technology such as screen readers do not pick up on color alone, so a student using one won’t be able to tell the text is supposed to be important.

This is an example of text that’s colored with an appropriate level of contrast, but doesn’t have any additional styling:

Making this line bold may not make much of a difference visually, but it’s crucial for screen readers to be able to understand its importance.

Using UDOIT to Fix This Issue

This is what an error looks like in UDOIT. There is a Preview box on the right that displays the error and checkboxes on the left that allow you to either bold or italicize the problematic text. Check whichever you prefer (either is fine, or both) and then hit the “Save” button. Now your colored text is fully accessible!