Southern New Hampshire University / Accessibility and Assistive Technology / Color and Contrast

Colour Contrast Analyser (CCA)

Updated on Sep 14, 2023

TPGi’s free color contrast checker tool allows you to quickly determine the contrast ratio of two colors simply using an eye dropper tool. The CCA enables you to optimize your content–including text and visual elements–for individuals with vision disabilities like color blindness and low-vision impairments.

This color contrast will require you to download a program to your computer. Or if you prefer to use a Chrome browser extension and a website color contrast check review the article: How to Check Color Contrast with A11Y

How to download the Colour Contrast Analyzer (CCA).

Visit TPGi's website to download the colour contrast analyzer.

Select the Windows or Mac download option.

The download button for Colour Contrast Analyser, with the Mac edition being pointed at.

Select from your recent downloads.

The view may differ depending on whether you have Windows or Mac.

Double-click the file that was downloaded, and the download will begin.

A screenshot of the downloaded file from Colour Contrast Analyser.

Select the CCA icon and move it to the “Applications” folder in the pop-up window.

The CCA icon and the applications folder.

Once it is completed, you can close the pop-up window.

How to use Colour Contrast Analyser (CCA)

Select two colors. Add the “Foreground Color” and the “Background Color.” The foreground color is usually the text, and the background color is the outside/surrounding text.

Open "Finder."

Select "Applications."

The selection after opening finder. The "applications" boxed in red.

The "Colour Contrast Analyser" will be in the folder.

The chess and CCA icon in the applications folder. The "CCA" app boxed in red.

Double-click the app.

The CCA application after being opened. The foreground and background color boxes are shown, as well as a sample preview and the color contrast results shown.

How to check the color contrast.

Select the “Eye Drop” icon for “Foreground Colour. Select the color.
Select the "Eye Drop" icon for "Background Colour." Select the color.
Test the current status.
To fix it, you need to choose a Hex value with sufficient contrast, and here is a list with SNHU-branded Hex values that would pass.
Repeat the steps for any other background and foreground colors.

CCA application with arrows pointing to the two eyedropper icons, numbered one and two, as well as the WCAG 2.1 results boxed in red and numbered as the third step.

Below is an example of what would be the foreground color and what would be the background color. This image has two background colors and one foreground color.