Back to Top

Clearing Up a Gray Area: How a Color Checker Can Improve Web Accessibility

web accessibility colour checker

Web accessibility means that websites, apps and other online technologies have been designed in a way that makes it possible for people with a variety of disabilities to interact with them. They can perceive them, understand them and use them without effort. Web accessibility also tends to make the operation of technology easier for other groups of people who don’t necessarily have disabilities – such as those using small screens, or those who need reading glasses – and in a wider variety of settings, such as quiet environments.

There are many components to making a website accessible. One of them, known as “contrast” or “color contrast,” refers to the contrast between the text and the background when you’re looking at a web page. Is the text dark enough, and is the background light enough? A web accessibility color checker is a tool for testing whether or not this contrast is sufficient.

Why Does Contrast Matter?

Consider the difference between a thick, black word against a pale background, and a medium-gray word against a slightly lighter gray background. In the first example, the superior contrast allows the word to stand out and be read more easily. When there is poor contrast, however, it’s more of a struggle to see and read the word. It’s even more difficult when the text is smaller, or the font is thinner. It’s like trying to read a street sign with low contrast from a great distance. If you’re a person with low vision who nevertheless relies on your eyesight to read a web page, poor contrast can make it impossible to make out the words.

This “low contrast sensitivity,” as it’s sometimes described, can be an issue for people of any age, but it’s more common as we get older. Thus baby boomers and seniors who haven’t had particular vision problems in the past may start to notice that they can read and use a website more easily and efficiently when there is good contrast between the text and the background.

This relates to what we mentioned earlier – that the various features of web accessibility often make it easier for people without diagnosed disabilities to use technology. That’s certainly true in the case of contrast. Not only is it preferable for many who are aging, it’s also useful when we’re in different lighting conditions, such as bright sunlight, or using older computer monitors with varying color calibration settings.

How Much Contrast is Required for Web Accessibility?

The Web Content Accessibility Guidelines (WCAG) 2.0, Level AA, describes adequate contrast in its Success Criterion 1.4.3.1 According to these requirements, in order for a web page to be considered accessible, the contrast ratio between text and the background must be a minimum of 4.5 to 1. This is, therefore, the ratio that web accessibility color checkers will usually test for.

Although web designers and accessibility consultants may talk about “color contrast,” or “color checker,” it’s really just contrast they’re trying to achieve. The actual colors are irrelevant – it’s the shades of light and dark that are important. That’s because some people, in fact, can’t see color differences (also known as color blindness), and it’s important that the contrast works for everyone.

Another interesting note about the WCAG 2.0 requirements for contrast is that the minimum ratio for larger text (an 18-point font, or a 14-point bold-face font) is only 3:1. That’s because text is easier to make out when it’s larger, bolder, or both, and doesn’t require such a high contrast with its background to be accessible. (See the example below.) This means that designers who want to apply certain colors but feel limited by the contrast restrictions have the option of enlarging the text, and thus using a wider range of hues.

Incidentally, the contrast ratio must be 7:1 if you’re aiming to achieve Level AAA of WCAG 2.0 instead of Level AA. However, people with vision disabilities who require this much contrast typically use their own assistive technologies (software) to enhance the screen display, and those technologies usually include options for enhancing the contrast or enlarging the display. Not everyone has access to assistive technologies, so meeting Level AAA is a worthy goal.

However, legislation such as Section 508 of the Rehabilitation Act usually requires compliance with the Level AA standards of WCAG 2.0 in order to achieve web accessibility. Some color checkers will test for both Level AA and Level AAA.

The new 2.1 version of WCAG, published in June, adds a minimum contrast requirement (3:1) for important non-text elements. A good example would be a button that needs to be clicked to place a grocery order. If the button contrasts poorly with the background color, a person with low vision or color blindness may not be able to detect it.

Should You Be Using a Color Checker?

A wide range of accessibility testing tools are available that can test a web page or computer document for contrast. They work in different ways. For example, Color Contrast Analyser will test the contrast of a PDF against WCAG 2.0 when you open it in a browser2. The Sim Daltonism color blindness simulator is a downloadable app that can show you how your page actually looks to people with various types of color blindness3.

There are also tools that can help you avoid using poor contrast while you’re still designing or developing your website. The Contrast Ratio website, for example, lets you choose text and background colors, and then lets you know whether or not the contrast between these colors meets the criteria of WCAG 2.0 Level AA or Level AAA4.

Minimum contrast is just one out of many criteria that determine whether a web page, app or document is accessible. A color checker tool won’t give you a complete overview of how accessible your website is, or list all the barriers that need to be removed.

Web accessibility color checkers can, however, be quite useful when you want to determine whether the contrast is adequate between a specific font and background color, or when you’re trying to decide which shades and colors you can use without creating accessibility barriers for people with disabilities.

Contrast matters, and it will become even more crucial as the population ages. A web accessibility partner can tell you more about this and the many other barrier-free features of online technologies. It’s worth ensuring that your digital properties are usable by people of all ages, and all abilities.

An Innovative Solution

eSSENTIAL ACCESSIBILITY has developed a comprehensive accessibility solution to help organizations follow the Web Content Accessibility Guidelines (WCAG) and achieve and maintain compliance with standards and regulations. This includes integrating web compliance evaluation and remediation services with assistive technology to deliver a transformative experience for people with disabilities. Learn more about eSSENTIAL ACCESSIBILITY’s innovative solution.

References

  1. Contrast (Minimum) W3C, 2016
  2. Getflourish/ Sketch-Color-Contrast-Analyser Github, 2018
  3. Sim Daltonism: The color blindness simulator Sim Daltonism, 2018
  4. Contrast Ratio Contrast Ratio, 2018

Discover how you can give people with disabilities an inclusive digital experience

Request a personalized demo, and one of our experts will answer all of your accessibility questions.