WCAG Color Contrast Checker

Test foreground and background combinations against WCAG 2.2 AA and AAA ratios. Includes a live preview and precise pass/fail for normal, large and UI text.

—

—

—

WCAG 2.2 Criteria

Live Preview

Values

WCAG 2.2 Contrast Rules

Contrast ratio is a number from 1:1 (no contrast — same color) to 21:1 (maximum — black on white). WCAG 2.2 defines minimum requirements based on text size:

AA (minimum)

  • Normal text — 4.5:1
  • Large text (≥18pt / ≥14pt bold, ~24px / ~18.66px bold) — 3:1
  • UI components / graphics — 3:1

AAA (enhanced)

  • Normal text — 7:1
  • Large text — 4.5:1

The Formula

Luminance (per channel): c ≤ 0.03928 ? c/12.92 : ((c+0.055)/1.055)^2.4
L = 0.2126·R + 0.7152·G + 0.0722·B
Contrast = (Lighter + 0.05) / (Darker + 0.05)

Common Failures

  • Grey-on-grey placeholders (often under 3:1)
  • Brand colors that pass in isolation but fail on white
  • Link colors that pass for text but fail against link hover backgrounds
  • Disabled button text — exempt from WCAG, but poor UX
  • Focus indicator borders — must be 3:1 against adjacent colors

Why It Matters Beyond Compliance

Contrast isn't just an accessibility checkbox. Low-contrast sites have measurably lower engagement — users squint, abandon and bounce. Improving contrast from 3:1 to 4.5:1 often increases form completion by 5–10%.

Contrast FAQ

What is "large text" for WCAG?

18pt (24px) regular or 14pt (18.66px) bold. Large text needs only 3:1 for AA and 4.5:1 for AAA.

Does AAA mean I should always aim for it?

No. AAA is aspirational. Most consumer products target AA. AAA can be too restrictive for brand identity. Target AA for all text, AAA for body content when feasible.

What about placeholder text?

WCAG applies to all text that conveys meaning — placeholders included. Under WCAG 2.2, placeholders must meet AA. Many sites fail this with 2:1 grey placeholders.

Are disabled buttons exempt?

Yes — WCAG exempts "inactive user interface components." But disabled text that's unreadable creates usability problems. Use 4.5:1 as a practical floor even when not required.