What contrast ratio passes WCAG 2.1 AA?

WCAG 2.1 Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). The checker above shows whether your color pair meets these thresholds.

What is the difference between AA and AAA contrast?

Level AA requires 4.5:1 for normal text and 3:1 for large text. Level AAA is stricter, requiring 7:1 for normal text and 4.5:1 for large text. AA is the common compliance target; AAA is recommended where maximum readability matters.

Does passing this checker mean my site is ADA compliant?

Color contrast is one part of accessibility and ADA compliance. Meeting WCAG 2.1 AA contrast removes a common barrier, but full compliance also covers keyboard navigation, alt text, focus states, and more.

What counts as large text for contrast?

Under WCAG, large text is at least 18pt (24px) for normal weight, or 14pt (18.66px) for bold. Large text only needs a 3:1 ratio for AA, versus 4.5:1 for normal text.

Is this color accessibility checker free and private?

Yes. The contrast ratio is computed entirely in your browser using the official WCAG formula. No colors or data are sent to a server, and there is no sign-up.

All tools/Web Inspector

Color Contrast Checker

Runs locally

Check foreground and background color pairs against WCAG 2.1 accessibility standards. See AA and AAA compliance at a glance.

Foreground

Background

Preview

The quick brown fox jumps

Normal body text at 16px. Readable or not?

Small text at 13px — hardest to pass WCAG AA.

ButtonOutline

Contrast Ratio

20.12

:1 ratio

WCAG 2.1 Compliance

Normal text (< 18pt)

AA ✓AAA ✓

Large text (≥ 18pt / 14pt bold)

AA ✓AAA ✓

UI components & graphics

AA ✓

Overall: AAA

Excellent — passes all WCAG 2.1 levels

✓

This free WCAG color contrast checker measures the contrast ratio between any foreground and background color pair and tells you instantly whether it passes WCAG 2.1 AA and AAA — the same thresholds used for ADA and accessibility compliance. Enter two colors and see the ratio, the rating for normal and large text, and a live preview. Everything is calculated in your browser.

How to check color contrast for WCAG compliance

1Enter your foreground (text) color and background color as hex values, or use the color pickers.
2Read the contrast ratio and the AA / AAA pass-fail badges for both normal and large text.
3Adjust either color until you reach at least 4.5:1 for body text (or 3:1 for large text) to meet WCAG AA.

What contrast ratio do you need?

WCAG 2.1 sets a minimum contrast ratio of 4.5:1 for normal body text and 3:1 for large text (18pt, or 14pt bold) to meet Level AA. The stricter Level AAA requires 7:1 for normal text and 4.5:1 for large text. Most accessibility and ADA compliance programs target AA as the baseline.

How the contrast ratio is calculated

Contrast ratio compares the relative luminance of two colors on a scale from 1:1 (no contrast) to 21:1 (black on white). This checker uses the official WCAG formula — converting each color to linear RGB, computing luminance, and taking the ratio of the lighter to the darker value — so the result matches what automated accessibility auditors report.

Frequently asked questions

What contrast ratio passes WCAG 2.1 AA?: WCAG 2.1 Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). The checker above shows whether your color pair meets these thresholds.
What is the difference between AA and AAA contrast?: Level AA requires 4.5:1 for normal text and 3:1 for large text. Level AAA is stricter, requiring 7:1 for normal text and 4.5:1 for large text. AA is the common compliance target; AAA is recommended where maximum readability matters.
Does passing this checker mean my site is ADA compliant?: Color contrast is one part of accessibility and ADA compliance. Meeting WCAG 2.1 AA contrast removes a common barrier, but full compliance also covers keyboard navigation, alt text, focus states, and more.
What counts as large text for contrast?: Under WCAG, large text is at least 18pt (24px) for normal weight, or 14pt (18.66px) for bold. Large text only needs a 3:1 ratio for AA, versus 4.5:1 for normal text.
Is this color accessibility checker free and private?: Yes. The contrast ratio is computed entirely in your browser using the official WCAG formula. No colors or data are sent to a server, and there is no sign-up.