Color Contrast

January 2023: This page has updated content.

---

 

Let's learn a little bit about color blindness form Kristi O'Neil-Gonzalez, from Teaching & Leaning Innovations at the California State University Channel Islands.

 

In this section of the workout, we are going to cover color contrast-- the difference in color between the background and the text/image (foreground). All students suffer when color contrast is not high; but especially students with low-vision or students who have some form of color blindness.

Color, like images, can add visual appeal to your course pages. However, in order for color to work it must be perceivable and should not interfere with learning. Color blindness Links to an external site. is a common condition--a reduced ability to distinguish between certain colors that primarily affects males. 

Using Color Correctly

The following recommended tools can easily check for proper color contrast to WCAG 2.0 AA Links to an external site. level, at least 4.5:1. You do not need to memorize the exact color contrast ratios, but as you become more aware, you will be able to more easily identify color contrast issues.

Be sure to check the contrast of any custom colors you use throughout your course via a free online color contrast tool. These tools are very helpful to check any content you create, course materials, web content, presentations, etc. Some recommended free color contrast tools are:

• WebAIM Color Contrast Checker Links to an external site. - Web based (no install required) - This video demonstrates basic tool functionality. Note: In the MacOS environment, clicking on the color square within the tool allows the user to access an eyedroper to "read" the color. The eyedropper is not available in Windows computers, in order to check color in PC environments, the Colour Contrast Analyser (see below) is recommended.
  
  Note: You can turn on Closed Captions (CC) by clicking on the CC button in the video player. Or if you prefer you can also access the WebAIM Video transcript file Download WebAIM Video transcript file
  .
  
  
• Colour Contrast Analyser Links to an external site. by the Paciello Group - Available for Windows PC or MasOS systems. This tool contains a small eye dropper that picks up color in HEX format (e.g., #ffffff = white) for local files or web pages.
  
  
  Note: You can turn on Closed Captions (CC) by clicking on the CC button in the video player. Or if you prefer you can also access the Colour Contrast Analyser Download Contrast Analyser
   Video transcript file Download  Video transcript file
  .

Using Color to Provide Information

Color can add so much to any content, but it can also detract. Avoid using color as the sole means of providing information or emphasis. Instead, consider using both an image and color, text and color, or a similar combination. Provide multiple ways to represent content (Universal Design for Learning Guidelines, Principle 1 Links to an external site.).

For example: Items marked with a purple square are due on Tuesdays, with an orange circle are due on Thursdays, and with a black triangle are due on Sundays. Alt-text was added to the figures so screen readers can properly identify the images. 

Table 1 - Days when activities are due

Category	Week 1	Week 2	Week 3	Week 4
Knowledge Check
Reading Response
VoiceThread