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