colourpicker.tools
← All tools

Colour contrast checker

Check any text and background pair against the WCAG thresholds, with a live preview.

Text colour
Background colour

Large text preview

Body text preview — this is the size most of your interface will actually use.

Contrast ratio
—

Common questions

What contrast ratio do I need?

WCAG AA requires 4.5:1 for body text and 3:1 for large text (18pt, or 14pt bold). AAA requires 7:1 for body text. The maximum possible ratio is 21:1, black on white.

What counts as large text?

At least 18pt (24px), or 14pt (18.66px) if bold. Large text gets a lower threshold because bigger letterforms stay legible at lower contrast.

Does contrast apply to icons and buttons?

Yes. WCAG requires 3:1 for meaningful non-text elements, including icons, form borders and focus indicators. It is the most commonly missed requirement.