Colour Contrast
Checker
Enter your foreground and background colours and instantly see whether they meet WCAG 2.2 contrast requirements for normal text, large text, and UI components. Free — no sign-up needed.
Normal text example (18px)
Large text example (24px bold)
21:1
Contrast Ratio
Try a preset pair:
What does WCAG say about colour contrast?
WCAG 2.2 defines minimum contrast ratios under Success Criterion 1.4.3 (AA) and 1.4.6 (AAA).
AA Normal Text
Body text and text smaller than 18pt (or 14pt bold) must achieve a contrast ratio of at least 4.5:1 against its background.
AA Large Text
Text at 18pt or larger (or 14pt bold or larger) only needs a 3:1 ratio under WCAG AA, because it is easier to read at lower contrast.
AAA Enhanced
WCAG AAA requires a 7:1 ratio for normal text and 4.5:1 for large text — the gold standard for maximum readability.
Why colour contrast matters
Around 300 million people worldwide experience colour blindness, and many more have low vision or ageing eyesight. Insufficient contrast between text and background is one of the most common accessibility barriers on the web — and one of the easiest to fix.
Meeting WCAG contrast ratios helps your content stay readable across a wide range of devices, lighting conditions, and user abilities — and keeps you compliant with accessibility legislation in the UK, EU, and US.
Need a full accessibility audit?
Colour contrast is just one of hundreds of WCAG criteria. Our manual audits test your entire site with assistive technology.
Learn about our audits →