What contrast ratio do I need for WCAG AA?

At least 4.5:1 for normal text and 3:1 for large text and interface components such as input borders and icons.

What is the difference between AA and AAA?

AAA is stricter: 7:1 for normal text and 4.5:1 for large text. Most organisations aim for AA across the site and AAA where they can.

How is the contrast ratio calculated?

Each colour’s relative luminance is calculated from its red, green and blue values. The ratio is the lighter luminance plus 0.05, divided by the darker luminance plus 0.05.

Does contrast matter for SEO?

Not as a direct ranking factor. It matters because people who can’t read your page leave, and accessibility is increasingly a legal expectation. A contrast pass on its own doesn’t make a site compliant.

Colour contrast checker

Pick a text colour and a background colour to get the WCAG contrast ratio and an instant pass or fail for AA and AAA. If a pair fails, the checker suggests the nearest shade that passes.

2.81:1Contrast ratio

Normal text AA (needs 4.5:1)Fail
Large text AA (needs 3:1)Fail
UI and icons AA (needs 3:1)Fail
Normal text AAA (needs 7:1)Fail
Large text AAA (needs 4.5:1)Fail

Nearest text colour that passes AA: #757575

This checks one WCAG criterion, colour contrast, for one pair of colours. A pass doesn’t mean a site is accessible or meets any accessibility law.

Want me to check your whole site’s contrast?

Send me your website and I’ll look at its main text colours and send the ones that fail WCAG AA contrast, with a passing alternative for each. Free.

How to use it

Enter your text colour and background colour as hex codes, or use the colour pickers.
Read the ratio and the pass or fail for normal text, large text and interface parts.
If it fails, try the suggested shade, which keeps your hue and changes only lightness.
Check every text colour on your site, including buttons, links and placeholder text.

Why it matters

Low-contrast text is one of the most common problems in WebAIM’s yearly accessibility scan of a million home pages, and one of the easiest to fix. Light grey text on white looks refined in a mockup and becomes unreadable on a phone in sunlight.

WCAG 2.2 sets clear thresholds. For level AA, normal text needs a ratio of at least 4.5:1 and large text at least 3:1. Interface parts like input borders and icons need 3:1. Level AAA raises text to 7:1 and 4.5:1.

Accessibility also has a legal side in Canada, for example Ontario’s AODA and the federal Accessible Canada Act. This checker tests one thing, colour contrast, against the WCAG thresholds. Passing it doesn’t make a site accessible or compliant with any law. That takes checking every WCAG criterion, ideally with real assistive technology, and advice on which rules apply to you.

Good to know

What counts as large text
At least 18 point (24px) regular, or 14 point (about 18.7px) bold.
Check hover and disabled states
A button that passes at rest can fail on hover. Disabled controls are exempt, but placeholder text is not.
Text on images
Check the lightest part of the image behind the text. A dark overlay is usually the cleanest fix.
One check, not an audit
Contrast is one WCAG criterion among many. A pass here means this colour pair meets the ratio, not that your site meets WCAG or any accessibility law.

FAQ