SNHU Instructional Support Services

How to Check Color Contrast with Colour Contrast Analyser (CCA) (On Mac)

Updated

This color contrast will require you to download a program to your computer/laptop. If this is something you would prefer not to do, you can use a website color contrast check. The article on how to use the website version: How to Check Color Contrast with A11Y

How to download the Colour Contrast Analyzer (CCA).

Open Safari on your Mac.

You will want to navigate to this website: to download colour contrast analyzer.

You will want to select “Download the TPGi CCA for Mac.”

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

The download will start.

You will want to select to the recent download at the top of the bar.

Safari web bar. The recently downloaded button boxed in red.

Depending on how you Safari bar is set up it can look different.

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

The downloaded file from Colour Contrast Analyser.

You will want to 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 the 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 the text. 

Open "Finder."

The finder icon.

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.

CCA application after being opended.

How to check the color contrast.

  1. Select the “Eye Drop” icon for  “Foreground Colour."
  2. Select the color.
  3. Select the "Eye Drop" icon for "Background Colour."
  4. Test the current status
  5. In order to fix it you need to chose a Hex values with sufficient contrast and here is a list with SNHU branded Hex values that would pass.
  6. Repeat steps for any other background and foreground colors.
CCA application with the arrows pointing to the two eyedrop.

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

Image showing where the testing would need to be done.

You may have a hard time finding two-color that pass all five criteria, so it would be best to get as many as you can but aim for all five passing. 

Benefits of using CCA over web version

· Compliance indicators for Web Content Accessibility Guidelines 2.1 (WCAG 2.1)

· Multiple ways to select colors: you can manually enter CSS color formats, use an RGB Slider, or opt for the color picker tool

· Color Blindness Simulator

· Support for alpha transparency on foreground colors

To View and Listen to a Video Tutorial:

Previous Article How to Check Color Contrast with A11Y
Next Article How to Add and Use High Color Contrast