Colour Contrast Checker — WCAG AA & AAA

Foreground (Text)

Background

Large Text Sample (18pt+) Normal body text at 16px — can your readers see this clearly? Small text at 13px — captions, labels, and helper copy.

Contrast Ratio —

AA Normal Text (4.5:1) —

AA Large Text (3:1) —

AAA Normal Text (7:1) —

AAA Large Text (4.5:1) —

WCAG AA (minimum)

Requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt bold). This is the legal minimum for most accessibility standards.

WCAG AAA (enhanced)

Requires 7:1 for normal text and 4.5:1 for large text. AAA is the gold standard for maximum readability across all users.

Why Colour Contrast Matters

Around 1 in 12 men and 1 in 200 women have some form of colour vision deficiency. Poor contrast affects far more people — anyone reading in bright sunlight, on a low-quality screen, or with age-related vision changes will struggle with low-contrast text.

WCAG (Web Content Accessibility Guidelines) defines measurable contrast thresholds so designers can test objectively, not by guessing. A ratio of 1:1 means the colours are identical. A ratio of 21:1 is pure black on pure white — the maximum possible contrast.

Quick rules:

Body text should always meet AA (4.5:1) at minimum.
Large headings and UI labels can pass at 3:1.
Decorative elements and disabled states are exempt.
Use AAA (7:1) for critical content — legal text, error messages, medical interfaces.

Want to explore accessible palettes? Try the Colour Scheme Generator and test your combinations here before shipping.