What is WCAG colour contrast?

WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and background colours to ensure readability for people with visual impairments. AA requires 4.5:1 for normal text and 3:1 for large text.

What is the difference between WCAG AA and AAA?

AA is the minimum standard most websites should meet (4.5:1 for normal text). AAA is the enhanced standard (7:1 for normal text) that provides even better readability.

What counts as large text?

Large text is defined as 18pt (24px) regular weight or 14pt (18.66px) bold weight and above. Large text has a lower contrast requirement of 3:1 for AA.

Why does colour contrast matter for accessibility?

Approximately 1 in 12 men and 1 in 200 women have colour vision deficiency. Poor contrast makes text unreadable for these users and difficult for everyone in bright or low-light environments.

How can I fix failing contrast?

Adjust the lightness of either colour. Our tool suggests the nearest accessible alternative automatically when your colours fail a contrast check.

Colour Contrast Checker

Test any two colours against WCAG 2.1 contrast requirements for accessible design.

Foreground (Text)

Background

Large Text Preview (24px bold)

Normal text preview, the quick brown fox jumps over the lazy dog.

Small text preview, check readability at smaller sizes too.

Component Preview

BadgeLink text

Contrast Ratio

17.06:1

Excellent

AA Normal Text (≥ 4.5:1): Pass

AA Large Text (≥ 3:1): Pass

AAA Normal Text (≥ 7:1): Pass

AAA Large Text (≥ 4.5:1): Pass

How to Use the Colour Contrast Checker

Pick Colours

Use the colour pickers or type hex values for your foreground text and background colours.

Check Compliance

Review the contrast ratio and WCAG AA/AAA results for both normal and large text.

Apply Suggestions

If your colours fail, use the suggested accessible alternative to fix compliance instantly.

Need Accessible Designs?

Our design team builds beautiful, WCAG-compliant interfaces that work for everyone.

Get a Free Consultation

Colour Contrast Checker

Component Preview

How to Use the Colour Contrast Checker

Pick Colours

Check Compliance

Apply Suggestions

Frequently Asked Questions

You Might Also Like

CSS Gradient Generator

Meta Tag Generator

JSON Formatter

Need Accessible Designs?