tools ▸ contrast checker

Readable foreveryone.

Pick a text and background colour to see the WCAG contrast ratio, pass/fail for AA and AAA, and a live preview of how it reads.

Text colour

Background colour

Large heading text

Body copy at 16px — the quick brown fox jumps over the lazy dog. यह पठनीय होना चाहिए।

Button

contrast ratio—

Check	Needs	Result

runs 100% in your browser — nothing is uploaded or stored

contrast checker ▸ explained

What you need
to know.

Check the WCAG 2.2 contrast ratio between text and background colours — AA and AAA.

4.5 : 1

The minimum for body text under WCAG 2.2 Level AA.

3 : 1

For text 24px+ (or 18.66px bold), icons and form borders.

7 : 1

The enhanced level — recommended for long-form reading.

related ▸ more free tools

faq ▸ before you buy

What contrast ratio does WCAG require?+

Level AA needs 4.5:1 for normal text and 3:1 for large text. Level AAA needs 7:1 and 4.5:1 respectively.

Does colour contrast affect SEO?+

Indirectly. Lighthouse flags low contrast in its accessibility audit, and readable pages keep visitors longer.

How is the ratio calculated?+

From the relative luminance of each colour: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter colour.

~$ provision --region in ✓ done in 47s