TPGi’s free color contrast checker tool 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.
This color contrast will require you to download a program to your computer.
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.
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.
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 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 "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." 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.
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.
For additional resources, visit:
- Accessibility Evaluation Tools - An Overview
- Color Contrast Checker
- Color-reliant Link Contrast Checker
- WAVE
- The Verge - Designing for Colorblindness
Select the link below to view additional resources: