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 will start.
You will want to select to the recent download at the top of the bar.
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.
You will want to select the CCA icon and move it to the “Applications” folder in the pop-up window.
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.
The "Colour Contrast Analyser" will be in the folder.
Double click the app.
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."
- Test the current status
- 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.
- Repeat steps for any other background and foreground colors.
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.
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:
Select the link below to view additional resources: