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.
Open the checker →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).
4.5:1 — 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.
3:1 — 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.
7:1 — 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.
How to use this tool
- Enter a hex code or use the colour picker for your text colour
- Enter the hex code for your background colour
- View your contrast ratio and pass/fail status for AA and AAA
- Try colour presets or generate a random accessible pair
- Copy your chosen hex values for use in your design system
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 →