Contrast Checker

Test color pairs against WCAG AA/AAA accessibility standards.

Large text looks like this (24px)

Normal body text looks like this. The quick brown fox jumps over the lazy dog — 0123456789.

—
Contrast Ratio
—
AA Normal (4.5:1)
—
AA Large (3:1)
—
AAA Normal (7:1)
—
AAA Large (4.5:1)

What Does the Contrast Checker Do?

The Contrast Checker measures the contrast ratio between a text color and a background color and grades it against the WCAG accessibility standard — the benchmark used by accessibility laws and audits worldwide. You get the exact ratio (e.g. 7.42:1), pass/fail badges for WCAG AA and AAA at both normal and large text sizes, a live preview of real text in your colors, and plain-language advice on what the result means.

How to Check Contrast

  1. Set your text color and background color — with the pickers or by typing HEX codes.
  2. Read the ratio and the four pass/fail badges.
  3. Look at the live preview to sanity-check readability.
  4. If it fails, darken/lighten one color and watch the badges flip — ⇄ Swap quickly tests the inverse.

Understanding the WCAG Thresholds

  • AA normal text — 4.5:1 — the legal-compliance baseline for body copy in most jurisdictions.
  • AA large text — 3:1 — for text ≥24px, or ≥18.5px bold.
  • AAA normal — 7:1 / AAA large — 4.5:1 — the enhanced tier for maximum readability.
  • UI components — 3:1 — icons, input borders and focus indicators also need 3:1 against adjacent colors (WCAG 1.4.11).

Roughly 1 in 12 men has some form of color vision deficiency, and everyone struggles with low contrast on sunlit phone screens. Good contrast isn't just compliance — it is usability for every visitor.

Frequently Asked Questions

How is the contrast ratio calculated?

From the relative luminance of the two colors using the WCAG formula: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color. Ratios run from 1:1 (identical) to 21:1 (black on white).

What counts as "large text"?

At least 24px regular weight, or at least 18.66px bold. Large text qualifies for the lower 3:1 (AA) and 4.5:1 (AAA) thresholds because bigger glyphs are easier to resolve.

Do I need AAA or is AA enough?

AA is the standard target and what accessibility regulations generally require. AAA is worth pursuing for body text on reading-heavy sites and for audiences with low vision, but it is not always achievable with brand palettes.

My brand color fails — what are my options?

Darken the color for text use while keeping the vivid version for large decorative elements, increase font size/weight to qualify as large text, or add a darker text-tone variant to the design system — a common pattern in mature brand guidelines.