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.
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.