Color contrast checker

Check whether your text and background colours have enough contrast to meet WCAG 2.2, and get the nearest colour that passes. Free, with nothing to sign up for.

A hex colour code, like #1e1b3a.

A hex colour code, like #1e1b3a.

Large text sampleNormal text sample. Easy to read?

Contrast ratio: 4.54:1

  • Pass: Normal text, Level AA, needs 4.5:1 (WCAG 1.4.3)
  • Pass: Large text, Level AA, needs 3:1 (WCAG 1.4.3)
  • Fail: Normal text, Level AAA, needs 7:1 (WCAG 1.4.6)
  • Pass: Large text, Level AAA, needs 4.5:1 (WCAG 1.4.6)
  • Pass: Icons, borders and form fields (AA), needs 3:1 (WCAG 1.4.11)

What the contrast rules ask for

  • Normal text needs a contrast ratio of at least 4.5:1 for Level AA, the level most laws ask for, and 7:1 for Level AAA.
  • Large text needs 3:1 for AA and 4.5:1 for AAA. Large means at least 24px, or 18.66px if bold.
  • Icons, input borders, focus outlines and chart lines need 3:1 against what's next to them, so people can find them.
  • Logos, and text on buttons that can't be used, don't need to meet these rules.

Ratios run from 1:1 (the same colour) to 21:1 (black on white). This checker cuts ratios to two decimals rather than rounding up, so a colour that shows as passing really does pass.

Check every colour on your site at once

Checking colours one pair at a time is slow, and it's easy to miss a page. Alleviator checks the text contrast on every page of your site, at desktop and phone sizes, and tells you where to change each colour in your website builder.

Scan my siteSee the WCAG 2.2 checklist