Southern New Hampshire University

Colour Contrast Analyser (CCA)

Updated on

What is the Colour Contrast Analyser (CCA)?

TPGi’s free Colour Contrast Analyser (CCA) is a color contrast checker tool that lets you quickly determine the contrast ratio of two colors using an eye dropper tool. The Colour Contrast Analyser (CCA) enables you to optimize your content - including text and visual elements - for individuals with vision disabilities like color blindness and low-vision impairments and ensures that the text and visual elements meet WCAG (Web Content Accessibility Guidelines) contrast requirements.

This color contrast will require you to download a program to your computer.

How to download the Colour Contrast Analyzer (CCA)

  1. Select the Windows or Mac download option.
The download button for Colour Contrast Analyser, with the Mac edition being pointed at.
  1. Select from your recent downloads.
The Safari web bar. The recently downloaded button boxed in red.
  1. Double-click the file that was downloaded, and the download will begin.
A screenshot of the downloaded file from Colour Contrast Analyser.
  1. Select the CCA icon and move it to the “Applications” folder in the pop-up window.
The CCA icon and the applications folder.
  1. Once it is completed, you can close the pop-up window.

How to open Colour Contrast Analyser (CCA)

  1. Open "Finder."
The finder icon.
  1. Select "Applications."
The selection after opening finder. The "applications" boxed in red.
  1. The "Colour Contrast Analyser" will be in the folder.
The chess and CCA icon in the applications folder.  The  "CCA" app boxed in red.
  1. 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 use Colour Contrast Analyser (CCA)

  1. Select the “Eye Drop” icon for  “Foreground Colour. Select the color.
  2. Select the "Eye Drop" icon for "Background Colour." Select the color.
  3. Test the current status.
  4. 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.
  5. 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.


Achieving the AAA standard for regular text can be challenging, as it represents the highest level of accessibility. It is recommended to prioritize compliance with the AA standard for regular and large text as well as the AAA standard for large text to ensure better readability.

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.

Screenshot on how to determine the background and foreground colors are found.

Select the link below to watch a video with step-by-step instructions:

How to download and use Colour Contrast Analyser (CCA) (Desktop Mac) (00:01:43)

Previous Article What is Color Contrast?
Next Article High Contrast (Chrome Extension)