KB001 Using the Colour Contrast Analyser

Contents

How to Use the Colour Contrast Analyser

An indispensable tool in web accessibility is the Colour Contrast Analyser. This free tool, which is available for both MacOS and Windows, makes it easy to check color contrast. The following screen shot shows the Colour Contrast Analyser in action.

Screenshot described in accompanying text
In this screenshot, we are showing the use of the “eyedropper” tool to take a sample of the foreground color. You will want to choose a point in the “middle” of a font stroke– ideally at a junction. The tool will then tell you the exact hex code associated with that color (if you know the exact code in advance, you could also just type it in). Repeat the same process for the background color and the tool will report the exact contrast ratio. Here, the black-on-white text is reported to have a 21:1 contrast ratio so it meets every contrast requirement in WCAG easily.

When to Use the Colour Contrast Analyser

For plain text, this “brute force” way of testing color contrast is unnecessary. For instance, the Edge and Chrome browsers make it easy to measure color contrast and the ANDI tool also reveals color contrast. There are three situations, however, where using tools like the Colour Contrast Analyser is essential.

Pre-Production Testing

The first situation arises in the development of wireframes or mockups at the Pre-Production stage. For instance, if you are creating designs using a design tool like Figma or Adobe XD, it is often quicker and easier to launch the Colour Contrast Analyser to determine if your color choices meets the WCAG requirements.

Inconsistent Foreground or Background Color

What if you have a white text but the background consists of a faint black and white photograph? Depending on how dark the photograph is shaded, there may be points where the white text does not have sufficient contrast against the varying background colors to meet WCAG. In this case, using the Colour Contrast Analyser to measure the points with the lowest contrast (in this case, the white lettering against the most lightly shaded portions of the photo that are adjacent to a letter) will be the only way to understand if there is sufficient contrast.

Color Contrast in Images (Including Images of Text)

Obviously, images require the use of the Colour Contrast Analyser. And this also includes images of text.