Using Contrast to Improve Visual Accessibility in eLearning

Visual accessibility ensures that people with varying degrees of visual ability can use websites, eLearning, and other digital information sources. Improving visual accessibility makes your products available to people who are color blind, have low vision, or are blind, and those with sensitivity to light (photophobia), cataracts, glaucoma, and other eye conditions.

Designers everywhere continue to discover that inclusive design benefits everyone. By improving the visual accessibility of an eLearning course, you improve its design and usability for all users.

This article focuses on the principle of contrast, which is a significant factor in visual accessibility. You can learn more about other ways to improve visual accessibility in my course,  Accessibility for Visual Design.

The Effects of Contrast on Perception

Graphic designers use contrast in color, size, shape, texture, detail, and typography to make a visual element stand out. Why does this work? Our brains are attuned to finding differences. When there is a noticeable contrast between two attributes, it grabs our attention because a difference between two elements often conveys significant information. As a general rule, contrast will emphasize and draw attention to an element or to text.

Color Contrast for Accessibility

The use of a pronounced contrast between the foreground and background colors of text, images of text, and user interface controls is important for accessibility. A high color contrast between elements makes them easier to see and read  compared to low contrast. High contrast is essential to the visual accessibility of eLearning and web pages.

However, you don’t need to rely on your perception to determine the appropriate amount of contrast. There are accepted standards you can follow.

WCAG Guidelines

The World Wide Web Consortium publishes the standards for using sufficient contrast in its WCAG Guidelines. These guidelines are globally recognized as the standard for making content accessible for various disabilities, not just visual. So, how do the WCAG Guidelines define contrast?

“Contrast is a measure of the difference in perceived ‘luminance’ or brightness between two colors expressed as a ratio.”

The ratio ranges from the lowest contrast of 1:1, white text on a white background, to the highest contrast of 21:1, black text on a white background. The latest WCAG Guidelines are version 2.2, published in October 2023.

Contrast Checkers

It’s difficult for the human eye to judge whether the contrast ratio is sufficient when looking at text, images of text, or user interface controls. Contrast checkers, like WebAim Contrast Checker and  Adobe Contrast Checker (part of Adobe Color), can help you identify when the contrast between foreground and background colors is an appropriate ratio.

Finding the Hex Code

You’ll need to find the hexadecimal color code (hex code) for your foreground and background colors to use a contrast checker. Hex codes represent colors using six alphanumeric characters. The characters tell a digital display how much red, green, and blue to show. As an example, the hex code for black is #000000, and the hex code for pure red is #ff0000.

You can use a wide range of tools to get the hex code for your colors, including:

• Editing tools like Photoshop, Illustrator, and Canva
• Authoring tools such as Storyline and Captivate
• Presentation software like PowerPoint and Google Slides
• Web browser eyedropper tools.

How to Use a Contrast Checker

1. Identify the hex code value of the foreground and background colors.
2. Then, enter the hex code into your contrast checker of choice. You will be given a pass or fail rating for the color contrast ratio. There should be two ratings: one for Level AA and one for Level AAA.

3. Know the WCAG conformance level you may be required to meet (Level AA or Level AAA). WCAG Level AAA includes a stricter set of standards than Level AA. See below.

When the Contrast Checker Result Doesn’t Seem Right

Sometimes, you may disagree with the contrast checker’s pass or fail result. That may be because the contrast checker algorithm based on WCAG 2 does not always accurately represent how people perceive luminance or brightness.

A newer Advanced Perceptual Contrast Algorithm (APCA) method appears to be more accurate. It considers relative luminance, color, font size, font weight, and other factors. The new WCAG 3 Guidelines may incorporate the APCA approach.

My solution when a result from the checker doesn’t align with my perception is to use larger text or a darker background until I get a Pass result. I hope in the future we’ll have a more accurate method for determining contrast that better replicates human perception.

Accessibility for Visual Design Course

If you want to learn other ways to make eLearning accessible through visual design, see my course Visual Design for Accessibility at Mastering Instructional Design.

Related:
Getting Started with Inclusive Design