Web Accessibility and Color: It Doesn’t Have to Be Grey

| By Matt Long, Gale Software Engineering Manager |

For a number of reasons, dealing with—or even understanding—the importance of color to web accessibility can easily fall low on the priority list. However, color contrast is a very important aspect of web accessibility. Fortunately, it’s not that difficult to understand and adhere to.

There are 2 main parts related to color in WCAG 2.0 Guideline 1.4 – Distinguishable – Use of Color and Contrast.

Use of Color

Use of Color is the more straightforward of the two. The most trivial example of non-compliance would be having text that reads something like, “required fields are red” with nothing other than the color distinguishing the required fields from the non-required fields. Someone with some degree of color vision deficiency could have a hard time reacting appropriately.

Another example could be an interface that shows the status of 3 different tests: test 1, test 2, and test 3. The name of the test will be colored green to indicate a passing test, red for a failed test, and orange for a test that’s run successfully, but has warnings. The example below shows how 4 different types of color vision deficiencies could impact how someone sees the intended output outlined on the far left.

A better approach would be to also have text indicating the status of each test as shown in the image below.

Contrast

Within the context of accessibility and color, contrast can be defined as the difference in luminance or perceived brightness between 2 colors. It’s quite simple to be compliant, especially with all the available tools. The minimum WCAG AA color contrast ratio is 4.5:1 and 3:1 for large text. The AAA minimum ratios are 7:1 and 4.5:1. Basically, if a foreground/background color combination doesn’t have enough contrast, its use will not be WCAG compliant. There are several free tools available to calculate contrast, including a couple of my own, ColorA11y Chrome extension and A11y Color Palette, which both use colora11y. WebAIM’s Color Contrast Checker is also a popular color contrast tool.

Take a look at the colors below:

Most of the colors seem quite readable, especially to someone without a color vision deficiency. Use the NoCoffee vision simulator Chrome extension to see why contrast is important by maximizing the contrast loss. Many samples in the table above will be, if legible at all, more difficult to read than the rest of the text on the page. Also, notice how the larger text is much easier to read, which is why the guideline have different ratios for large text.

It’s Easy!

Color blindness affects approximately nearly 10% of the population, so it’s important to be aware of color contrast when choosing the color palette for any design. Now that you’ve got a better understanding of things to be aware of, why it’s important, and what tools are available, becoming and staying compliant should be easy.

Accessibility within Gale Resources

Gale’s products are designed following the latest Web Content Accessibility Guidelines and tested to make sure information is available to a wide range of people with disabilities, including those with blindness or low vision. ReadSpeaker text-to-speech technology also supports students who are visually impaired and enhances the experience for struggling readers who benefit from hearing each word aloud as they follow along. With ReadSpeaker, you can adjust the reading speed, enable automatic scrolling, and highlight text using prompts like increased word or sentence size, color, and underline.