🌓

WCAG Color Contrast Checker

Test foreground and background colors against WCAG 2.1 AA and AAA thresholds, with a live text preview and instant ratio.

Colors
Result
—
contrast ratio (1 = none, 21 = black on white)
Normal text (16px): The quick brown fox jumps over the lazy dog — 0123456789.
Large text (24px bold): Sphinx of black quartz.

About Color Contrast & WCAG

Roughly one in twelve men has some form of colour-vision deficiency, and everyone struggles with pale grey text on white in sunlight. WCAG 2.1 — the accessibility standard referenced by most government and procurement requirements, including WCAG conformance for Australian government services — sets minimum contrast ratios between text and its background: 4.5:1 for normal text and 3:1 for large text at level AA, rising to 7:1 and 4.5:1 at the stricter AAA level. Large text means at least 24px, or 18.66px if bold.

The ratio is computed from the relative luminance of the two colours using the WCAG formula, entirely in your browser. Use it when picking brand palettes, checking a client’s website, or fixing a dashboard theme — and remember contrast also applies to UI components and icons (3:1 minimum at AA). Our HexLab color tool pairs well for adjusting a colour until it passes.

How to Use This Tool

1
Set your text colour and background colour — type hex values or use the colour pickers.
2
Read the contrast ratio, updated live, and the pass/fail verdicts for WCAG AA and AAA at normal and large text sizes.
3
Check the live preview to sanity-check that the combination is actually readable, not just technically passing.
4
Failing? Click ⇄ Swap to test the inverse, or nudge the lightness of one colour until the ratio clears the threshold you need.

Common Use Cases

  • ♿
    Accessibility compliance. Verify a site meets WCAG 2.1 AA (4.5:1 for body text, 3:1 for large text) — a legal requirement for government and many corporate sites in Australia and beyond.
  • 🎨
    Brand palette validation. Test every text/background pairing in a brand guide once, and record which combinations are approved for body copy versus headlines only.
  • 🌙
    Dark mode design. Dark themes fail contrast in ways light themes don't — greys that looked fine on white often drop below 4.5:1 on dark backgrounds.
  • 🔘
    Button and badge states. Hover, disabled and focus states routinely slip below threshold; check each state's actual colours, not just the default.
  • 📊
    Charts and dashboards. Data-heavy screens with subtle series colours frequently fail for the labels layered on top of them.

Reading the Results

  • ✅
    AA normal text (4.5:1). The baseline standard for body copy — treat failures here as bugs.
  • 🔠
    AA large text (3:1). Headings 24px+ (or 18.66px bold) may use lower contrast.
  • 🏆
    AAA (7:1 / 4.5:1). Enhanced level for reading-intensive content and low-vision audiences.
  • 🎛️
    UI components (3:1). Icons, input borders and focus indicators need 3:1 against adjacent colours at AA.

Frequently Asked Questions

What counts as "large text" in WCAG?
18pt (24px) regular weight, or 14pt (18.66px) bold, and larger. Large text only needs 3:1 for AA instead of 4.5:1 — which is why a light grey heading can pass while the same colour fails as body copy.
Do these rules apply to logos and decorative elements?
No — WCAG exempts logos, brand names and purely decorative graphics. But interface icons that convey meaning (a delete button, a status indicator) need 3:1 against adjacent colours under the non-text contrast rule.
My brand colour fails — what now?
Keep the brand colour for large headings, logos and decorative elements (which have relaxed or no requirements) and darken or lighten it for body text. Small luminance shifts often pass without visibly changing the hue.
Does this cover text over images or gradients?
Check the worst-case spot: sample the lightest/darkest area behind the text and test against that. Adding a scrim or solid text background is the reliable fix.
Is 21:1 always best?
Not necessarily — pure black on pure white causes glare discomfort for some readers. Ratios between 7:1 and 15:1 with slightly softened colours are a comfortable sweet spot.