Color Contrast Analyser Setup Guide

Getting Started with Color Contrast Analyser

Color Contrast Analyser (CCA) is a free, open-source desktop application for Windows and macOS that measures the contrast ratio between two colors. It helps you verify whether text and interface elements meet WCAG contrast requirements (4.5:1 for normal text, 3:1 for large text).

Download from GitHub

The Color Contrast Analyser project is maintained on GitHub:

https://github.com/ThePacielloGroup/CCAe

Go to the Releases section and download the latest version for your operating system. For Windows, download the .exe file. For macOS, download the .dmg file.

Install CCA

Windows: Run the .exe installer and follow the on-screen prompts. CCA will be added to your Start menu and desktop.

macOS: Open the .dmg file and drag the CCA application to your Applications folder. Then launch it from Applications.

Use the Eyedropper Tool

Open a checkpoint page from this site (e.g., 1.4.3 Contrast Minimum). Launch the CCA app on your computer. Look for the eyedropper icon in the CCA interface. Click it, then click on text in the checkpoint page to sample the text color. Next, click on the background area to sample the background color. CCA will immediately calculate the contrast ratio.

Read the Contrast Ratio

CCA displays the contrast ratio as a number followed by a colon (e.g., "4.5:1" or "3:1"). The larger the ratio, the greater the contrast. WCAG defines these requirements:

• 4.5:1 or higher: Passes Level AA for normal text.
• 3:1 or higher: Passes Level AA for large text (18pt+) and UI components.
• 7:1 or higher: Passes Level AAA for normal text.
• Below these thresholds: Fails the contrast requirement.

Test Fail and Pass Modes

Many checkpoint pages have a toggle button to switch between "Fail" and "Pass" examples. Use CCA to measure contrast on both versions. You should see lower ratios in the fail example and higher ratios in the pass example. This demonstrates exactly how color adjustments fix contrast issues.

Helpful Tips

• Test both light and dark modes of this site (toggle the Dark Mode button in the page header) to verify contrast works in both themes.
• Pay special attention to focus indicators, links, and buttons—they often have strict contrast requirements.
• Use CCA in combination with NVDA (screen reader) and axe DevTools to cover different accessibility aspects.
• Some checkpoints like 1.4.11 (Non-text Contrast) specifically test UI component contrast, not just text. Use CCA on buttons, borders, and icons too.
• Remember that CCA measures the colors at the moment you sample them—if contrast changes on hover or focus, you may need to sample multiple times.