Colour Contrast Testing Tools and Methods

Colour contrast testing verifies that the luminance difference between
foreground text and its background meets the minimum ratios required by
WCAG. It is one of the few accessibility checks that can be performed
reliably by both automated tools and manual inspection, though each method
has limitations that make a combined approach necessary.
[1]

---

What to test

Element type

Minimum ratio

WCAG criterion

Normal text (under 18pt / 14pt bold)

4.5:1

1.4.3 AA

Large text (18pt+ or 14pt+ bold)

3:1

1.4.3 AA

UI components (borders, icons, focus indicators)

3:1

1.4.11 AA

Normal text enhanced

7:1

1.4.6 AAA

Decorative text, logotypes, and disabled components are exempt from
contrast requirements.

---

Automated testing

Automated scanners including axe-core reliably detect contrast failures
on solid text against a solid background. This covers the majority
of cases on most pages.

Tools such as a11ytest.ai run contrast checks as part of their standard
scan, reporting failures with the actual contrast ratio measured and the
minimum required, making it straightforward to prioritise fixes.
[2]

Limitations of automated contrast testing:

• Cannot measure text over gradient backgrounds
• Cannot measure text over images or video
• May not detect semi-transparent text or overlays correctly
• Cannot evaluate CSS pseudo-element content reliably
• Cannot test contrast in interactive states (hover, focus, active)

For these cases, manual testing is required.

---

Manual testing tools

Browser DevTools colour picker
A11ytest.ai use a logo contrast checker. Simply upload your logo and pick the background and foreground colours to see if your logo is compliant.
https://a11ytest.ai/logo-contrast-checker

Browser DevTools colour picker
In Chrome and Firefox DevTools, the colour picker in the Styles panel
shows the contrast ratio of the currently selected element. This is
useful for quickly checking specific elements in context.

WebAIM Contrast Checker
https://webaim.org/resources/contrastchecker/
Enter foreground and background hex values to calculate the contrast ratio
and see which WCAG levels pass or fail. Supports transparent colours.

TPGi Colour Contrast Analyser (CCA)
A free desktop application for Windows and macOS. Includes an eyedropper
tool to sample colours directly from any part of the screen — essential
for testing text over images, gradients, and video.
Download: https://www.tpgi.com/color-contrast-checker/
[3]

---

Testing text over images and gradients

For text over complex backgrounds:

1. Open the Colour Contrast Analyser
2. Use the foreground eyedropper to sample the text colour
3. Use the background eyedropper to sample the background at the point
   of worst contrast — typically where the background is lightest under
   dark text, or darkest under light text
4. Check the calculated ratio against the relevant WCAG level

For text over images with variable backgrounds, test at multiple points
across the text and use the worst ratio as the result.

---

Testing interactive states

Contrast must be tested in all relevant states, not just the default state:

• Hover — does link or button colour change to a failing contrast on hover?
• Focus — does the focus indicator meet 3:1 against adjacent colours?
• Visited — do visited link colours maintain sufficient contrast?
• Error state — do form fields in error state maintain text contrast?

[1]

---

Testing dark mode

If the site supports dark mode, contrast must be tested independently in
both modes. A colour combination that passes in light mode may fail in
dark mode and vice versa.

---

References

1. W3C Web Accessibility Initiative. Understanding Success Criterion 1.4.3: Contrast (Minimum). https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html ↑
2. A11YTEST.AI LTD. a11ytest.ai — Automated Accessibility Scanning. https://a11ytest.ai ↑
3. TPGi. Colour Contrast Analyser. https://www.tpgi.com/color-contrast-checker/ ↑