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 (CCA). 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 computer to make letters look smoother.
When using CCA, be sure NOT to select any of the lighter colors around the edges, instead:
- If you’re using Word or a web browser, first Zoom In (by pressing ctrl + plus) to 200% or more -- this will make picking the solid color much easier.
- Look for a letter with a straight line, like the crossbar of an “e”, and position the center of the circle over the darkest, solid part of the line.
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 (left of the color picker button).
- Select “HSL”.
- 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.