Having an adequate color contrast between your text and its background is one of the requirements for accessibility that most automated accessibility checkers can't catch. Additionally, it's one of the most common errors on the internet. Here's how to check color contrast in your work.
The Web Content Accessibility Guidelines specify that text must have adequate contrast from the color of its background, and that graphics must also have an adequate contrast against their backgrounds. This is one of the accessibility errors that automated accessibility checkers struggle with. It's something that needs to be checked manually.
How to Check Your Color Contrast
Choose either the downloadable TPGi Colour Contrast Analyser or the browser-based WebAIM Color Contrast tool. Both tools are free, and both tools will give you an answer without you needing to calculate the math by hand.
TPGi Colour Contrast Analyser
- Open the Tool: Launch the CCA application on your Windows or Mac computer. It stays pinned as an overlay on top of your browser, document, or presentation.
- Select the Foreground Color: Click the eyedropper icon in the "Foreground colour" section, then click or hover over your text or UI element.
- Select the Background Color: Click the eyedropper icon in the "Background colour" section, then click the color directly behind your text. (For images or gradients, sample multiple spots where contrast looks weakest).
- Read the Results: Check the WCAG 2.1 results section near the bottom to view your exact contrast ratio (e.g.,
4.5:1or7:1) and pass/fail status for AA and AAA compliance.
The video below gives you a demonstration of how to use the TPGi Colour Contrast Analyser.
WebAIM Contrast Checker
- Input Foreground Color:
- Type a Hex color code (such as
#000000for black) directly into the Foreground Color box, or click the color box to open the picker. - Use the eyedropper tool inside the color box to click and sample any visible color or text directly from your screen.
- Type a Hex color code (such as
- Input Background Color:
- Repeat the same process for the Background Color box by typing a Hex code, using the color picker, or grabbing a color with the eyedropper tool.
- Review the Contrast Ratio:
- The tool instantly calculates the contrast ratio (e.g.,
4.5:1or7:1). - It displays pass/fail results for Level AA and Level AAA standards across normal text, large text, and graphical objects/UI components.
- The tool instantly calculates the contrast ratio (e.g.,
The video below demonstrates how to use the WebAIM Contrast Checker.