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.
Colour Selection
Enter hex colour (e.g. #000000) or use the colour picker
Enter hex colour (e.g. #FFFFFF) or use the colour picker
Colour Presets
Preview
Sample Heading
This is normal text (16px) displayed with your selected colour combination. It helps you visualise how readable your content will be.
This is large text (18px bold) which has different accessibility requirements.
Accessibility Results
21.00:1
Contrast Ratio
WCAG AA (Minimum)
WCAG AAA (Enhanced)
Recommendation
Excellent contrast – meets all WCAG standards including AAA.
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 →