Contrast Checker

WCAG Color Contrast Checker

Test any text and background color pair against WCAG 2.2 AA and AAA. Get the exact ratio, pass/fail per use case, and one-click accessible alternatives.

Preview

21 : 1

Large heading text (24px)

Normal body text at 16px. The quick brown fox jumps over the lazy dog - readable copy is the whole point of getting contrast right.

Results

-

Related tools

Color Contrast: the Cheapest Website Upgrade There Is

Roughly 1 in 12 men and 1 in 200 women have some form of color vision deficiency, and everyone struggles with pale gray text on white in sunlight. WCAG contrast ratios exist so text stays readable for real people on real screens - and meeting them is increasingly a legal expectation for business websites in the US, UK and EU.

What the numbers mean

Brand colors that fail

Most brand palettes have at least one color that fails on white - typically a light blue, orange, or green. You don't have to abandon it: use it for large headings, backgrounds, and decorations, and use the suggested darkened variant (this tool computes one automatically) for body text and links. Extract your palette first with the Palette Extractor, then test every text/background pair you actually use.

Frequently asked questions

Does contrast affect Google rankings?

Not directly as a named ranking factor, but low contrast raises bounce rates, fails Lighthouse accessibility audits, and degrades the page experience signals Google does measure. It also exposes you to accessibility complaints.

What about text on images or gradients?

Test against the lightest and darkest area the text can sit on. If either fails, add a solid or semi-opaque backing panel behind the text.

Want your whole site checked, not just two colors?

Webteqno runs full accessibility, SEO and performance audits - then fixes what it finds. Readable, rankable, fast websites for small businesses.

Request a free site audit from Webteqno