xtract.bot

Apps / CSS Generators / Contrast Checker

WCAG Contrast Checker

Check the contrast ratio between two colours against the WCAG 2.1 guidelines. Aim for ≥ 4.5 (AA) for normal text and ≥ 7 (AAA) for stricter accessibility budgets.

Quick fixes:
3.68 : 1

Contrast ratio between the two colours.

AA · Normal≥ 4.5
AAA · Normal≥ 7
AA · Large≥ 3
AAA · Large≥ 4.5

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

WCAG defines "large text" as ≥ 18pt (≈ 24 px) regular weight or ≥ 14pt (≈ 18.66 px) bold. Non-text UI (icons, form borders) only needs to meet the "Large" thresholds.

What is this?

A free, online WCAG contrast checker that runs in your browser. Pick a foreground and background colour — it reports the contrast ratio and tells you whether the pair passes WCAG 2.1 AA and AAA at normal and large text sizes.

WCAG thresholds

  • AA · Normal — ≥ 4.5 · the baseline for body text
  • AAA · Normal — ≥ 7 · stricter, used by gov / health / a11y-focused sites
  • AA · Large — ≥ 3 · headings, icons, oversized callouts
  • AAA · Large — ≥ 4.5 · stricter version of the above

What "large text" means

WCAG counts text as "large" at ≥ 18 pt regular (≈ 24 px) or ≥ 14 pt bold (≈ 18.66 px). The same "Large" thresholds also apply to icons and UI element boundaries (the "non-text" contrast rule).

The "Bump to AA / AAA" fix

The fix buttons binary-search the foreground's HSL lightness for the smallest perceptual change that lifts the ratio above the target. Hue and saturation stay the same — only luminance moves — so your brand colour doesn't drift off-hue.

FAQ

What's the contrast-ratio formula?
(L1 + 0.05) / (L2 + 0.05) where L1 and L2 are the WCAG relative luminances of the two colours (with L1 being the lighter of the pair). The result is a number between 1 (no contrast) and 21 (black on white).
Why doesn't dark mode automatically pass?
Pure-grey palettes can fall below 4.5:1 if you push the foreground too close to mid-grey. Always check both light + dark variants before shipping.
Does it work with semi-transparent colours?
No — alpha compositing depends on what's behind the layer. This tool treats the foreground as opaque. Pre-composite your colour against its real backdrop before checking.

Related tools