Color contrast checker

A color accessibility checker compares two colors against WCAG 2.2 contrast rules. This page does that math in your browser. It does not load your website, and a passing pair is not a WCAG or ADA certificate.

Check a color pair

WCAG 2.2 Success Criterion 1.4.3 (contrast minimum) and 1.4.11 (non-text contrast). Large text is at least 18pt, or 14pt bold.

Foreground (text)

Background

Sample heading

The quick brown fox jumps over the lazy dog. Contrast is 17.74:1.

Ratio 17.74:1

WCAG 1.4.3 AA normal textPass (4.5:1)

WCAG 1.4.3 AA large text (18pt / 14pt bold)Pass (3:1)

WCAG 1.4.3 AAA normal textPass (7:1)

WCAG 1.4.11 AA non-text UIPass (3:1)

After the ratio looks fine

Run a website accessibility checker on the live URL. axe-core can flag contrast in the rendered DOM, plus names, labels, and cookies before Accept. See the WCAG checklist for what a machine still cannot prove.

Questions

Check a public URL

Homepage teaser. Sign in for PDF, history, and a schedule. The 7-day trial does not require a credit card.

Color contrast checker

Check a color pair

After the ratio looks fine

Questions

Does a passing contrast ratio mean the site is accessible?

What ratio does WCAG 2.2 AA require?

Is this the same as scanning a live page?

Check a public URL