Agencies
Services
Color Contrast
When colors are used for text, they must have enough contrast so the text can be read by people with visual impairments such as color blindness. Contrast is measured using a formula that gives a ratio ranging from 1:1 (white text on a white background) to 21:1 (black text on a white background). Using this formula, the minimum contrast requirements are:
- 4.5:1 - for regular sized text
- 3.0:1 - for large text (24px or 18.5px bold or larger)
Colour Contrast Analyser (CCA)
One of the easiest ways to measure contrast is using TPGi’s free Colour Contrast Analyser software. Download it from the link below and install it on your computer:
To use Color Contrast Analyser:
- Click the foreground color picker (eyedropper) button, point to the text you want to check, and click.
- Click the background color picker (eyedropper) button, point to the color behind the text, and click.
- Check that the the calculated contrast ratio is at least 4.5:1 (or 3:1 for large text).
See the important note below to avoid the most common mistake in using CCA.
IMPORTANT: Avoid this Common Mistake!
When you use the CCA color picker, it shows a circle that works like a magnifying glass. When you position it over a letter, you may notice that the colors around the edges are lighter shades or even different hues. This is called anti-aliasing, and it is automatically done by your operating system to make letters look smoother.
When using CCA, be sure NOT to select any of the lighter colors around the edges of text, instead:
- Look for a letter with a horizontal line, like an “e”, and position the center of the circle over the darkest, solid part of the line.
- If you’re in Word or a web browser, first Zoom In (by pressing ctrl + plus) to 200% or more, then click the color picker -- it will make picking the solid color much easier.
Tip: Finding Colors that Pass
If you have a color that doesn’t pass, you can use CCA to find a shade that does:
- With a color selected, click the “sliders” button (before the color picker button).
- Select the “HSL” tab.
- Click the number after the Lightness slider.
- Press the up or down arrow keys on your keyboard until the contrast ratio is at least 4.5:1 (or 3:1 for large text).
More Information
- WebAIM: Contrast and Color Accessibility - Understanding WCAG 2 Contrast and Color Requirements.