Skip to main content

Color

Use of color in digital content is valuable for conveying information and enhancing engagement for many users; but there are considerations when using color so that all users can access the content.

Color Contrast

Many people have difficulty reading text that does not have sufficient contrast relative to its background; that is, if the colors or brightness of the text and its background are too similar. Web Content Accessibility Guidelines (WCAG) 2.1 measures this contrast by a ratio of the relative luminance of the lighter color to darker color, ranging from 1:1 (e.g. white: white) to 21:1 (e.g., black: white). Providing a luminance contrast between text and its background of at least 4.5:1, can make the text more readable for people in most cases.

Example of good contrast. Block 1 illustrates black text over a white background. Block 2 illustrates yellow text over a dark blue background.
Figure 1: Examples of good color contrast

Notice how the colors of the text in Figure 1 are easily readable against their background. The image on the left has black text on a white background, and the image on the right show light yellow text on a dark blue background. A general rule of thumb is to always use light text against a dark background, or dark text against a light background.

Figure 2 shows a couple of examples for poor color contrast.

Example of bad color contrast. Block 1 illustrates red text over a green background. Block 2 illustrates red text over a white background.
Figure 2: Examples of poor color contrast

The image on the left shows red text on a green background. It’s 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 is red text on a white background. It might look passable, but the shade of red does not meet the acceptable ratio of relative luminance and should be darkened.

Best Practices Using Color Contrast

  • Ensure sufficient contrast not only in web pages, but in files (e.g., pdfs, presentation slides) as well.
  • Images of text, as opposed to real text, should also be kept in mind when considering contrast quality.
  • Use a color contrast checker to verify sufficient contrast. Free convenient options include:
    • WebAIM Contrast Checker can be used to calculate the contrast ratio between text and background, including in images of text, using a color picker.
    • The UDOIT tool in Webcourses@UCF can be used to check for (and fix) existing issues related to contrast. While in UDOIT, you can check for and fix other accessibility issues as well. Note that UDOIT scans only Pages, Assignments, Quizzes, etc., in Webcourses@UCF; it does not scan your course files (e.g., Word docs, PDFs, PPTs). So, course files need to be reviewed for accessibility issues separately.
    • Canvas Accessibility Checker in the rich content editor can be used to identify and fix contrast and other potential accessibility issues.

Color As Information

Color is a powerful element of online course design that can be used to present and differentiate content in text or graphics. When using color to convey information, such as assigning meaning to different colors, be sure to convey the same information in an alternate way (e.g., labels, icons with alt text) as well for users who have difficulty perceiving color.

For example, if you’re using color to indicate the differences between different items, such as mushrooms that are safe to eat and those that are poisonous, provide an alternate way to indicate those differences. Look at the following:

Mushrooms

  • Shiitake
  • Button
  • Amanita

There’s no way for anyone to know the context if they can’t see the color. You could additionally add a meaningful icon or emoji beside the poisonous mushrooms, with a proper title attribute (i.e., title="poison") or alt text (i.e., alt="Skull Icon" or alt="Poison")

  • Shiitake
  • Button
  • Amanita ☠

Alternatively, you could restructure the content itself. Consider simply creating two separate lists:

Safe-to-Eat Mushrooms

  • Shiitake
  • Button

Poisonous Mushrooms

  • Amanita

Best Practices Using Color as Information

  • When using color to draw attention to text in a page, bold or italicize it too. Screen readers do not interpret colored text or highlighting, but they do interpret bolded and italicized text.
    • Example 1: The deadline is January 29.
      • Example 1 is an example of text that’s colored with an appropriate level contrast but doesn’t have any additional styling.
    • Example 2: The deadline is January 29.
      • Example 2 is bold and more accessible. We recommended including another text note of some kind for important messages like this, such as including the words “Important” or “Reminder” before the message.
  • Provide the information conveyed with color differences through text (e.g., labels, icons with alt text) too.

Resources

  • To check the contrast of two specific HEX or RGB color values, you can use the WebAIM Contrast Checker.
  • If you use Chrome, download the Accessible Web Color Contract Checker and check the contrast directly on your webpage.
  • Canvas and Webcourses@UCF specific color contrast checkers:
    • The Canvas Accessibility Checker identifies color contrast issues on each page of your course and appears on the lower right corner of the Rich Content Editor.
    • UDOIT is a tool that identifies color contrast issues for an entire course.