Accessibility Awareness: Color Contrast

Video Transcript
[Narrator, Tim Yang]
By paying attention to color contrast, accessible content.
For example, how easily can you read the following text?
This is just a sample paragraph but with very low color contrast.
What about now?
The same paragraph with medium contrast.
And what about now?
Same paragraph with high contrast.
Keep in mind that color contrast thresholds differ between people.
So what works for you may not work for others.
Use a color contrast checker like the Paciello Group’s color contrast analyzer to ensure accessible color combinations.
For more information, go to go.illinois.edu/lighthouse-color-contrast.

Color Contrast Video is hosted on Illinois Media Space and was created by Tim Yang as part of the Illinois Lighthouse Project.

When it comes to accessibility, colors that look good together may not be easily seen by those with visual impairments or color blindness. Authors need to make sure there is enough contrast between the foreground and background colors (ratio) of text content in documents and web pages.

The following informational video on Color Contrast will help you understand the importance of color choices in creating documents, assignments, reports, announcements, and web pages.

How to Use This Video

Here are some suggestions on using this video:

  • Instructors might include this video as a part of a course and ask students to test webpages for color contrast compliance.
  • Individuals might use this video to raise awareness in their department for a disability awareness event.
  • Presenters might use this video as a part of their accessibility training.

Statistics

  • According to estimates from the 2018 National Health Interview Survey, 32.2 million American Adults age 18 and older reported experiencing vision loss.
  • Color blindness is much more prevalent in men than women, with about 1 in 16 men having some type of color blindness.

Standard

The W3C  Web Content Accessibility Guidelines requirement 1.4.3 requires a minimum contrast ratio of 4.5:1 for standard size text and a ratio of 3:1 for large text.  There are a variety of tools to help you compute the color contrast for the specific colors you use.

More Information