Stax

Color Contrast Checker

Check WCAG AA and AAA colour contrast ratios.

Contrast Ratio
21.00:1
LevelContextRequiredResult
WCAG AANormal text (< 18px, < 14px bold)4.5:1Pass ✓
WCAG AALarge text (≥ 18px or ≥ 14px bold)3:1Pass ✓
WCAG AAANormal text7:1Pass ✓
WCAG AAALarge text4.5:1Pass ✓

The quick brown fox jumps over the lazy dog.

Normal text (18px)

The quick brown fox jumps over the lazy dog.

Large text (24px)

The quick brown fox jumps over the lazy dog.

Bold large (18.67px bold)

PRESETS

Understanding WCAG contrast requirements

The WCAG 2.1 contrast guidelines have two levels — AA (minimum) and AAA (enhanced) — with different requirements for normal and large text:

  • WCAG AA Normal text: 4.5:1 — required for text under 18pt (24px) or 14pt bold (18.67px bold)
  • WCAG AA Large text: 3:1 — applies to text 18pt+ (24px+) or 14pt+ bold
  • WCAG AAA Normal text: 7:1 — recommended for maximum accessibility
  • WCAG AAA Large text: 4.5:1

Why contrast matters beyond accessibility

Sufficient contrast doesn’t just help users with visual impairments — it improves readability for everyone, especially on mobile screens in bright sunlight, for older users, or for anyone fatigued. Low-contrast “trendy” grey-on-white designs consistently rank poorly in user testing for comprehension and reading speed.

Common contrast failures and fixes

  • Light grey text on white background — use at least #767676 on #ffffff (4.54:1)
  • Placeholder text — should meet 4.5:1 even though it’s temporary
  • Disabled state — exempt from contrast requirements per WCAG
  • Decorative text (logos, purely visual) — exempt from requirements

Frequently asked questions

What is WCAG colour contrast?
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and background colours to ensure readability for users with visual impairments including low vision and colour blindness. A ratio of 1:1 means no contrast; 21:1 is the maximum (black on white).
What contrast ratio do I need to pass WCAG AA?
WCAG AA requires: 4.5:1 for normal text (below 18pt / 24px), and 3:1 for large text (18pt+ / 24px+ or 14pt+ / 18.67px+ if bold). AA is the standard legal requirement for many accessibility regulations including WCAG 2.1 and the EU Web Accessibility Directive.
What is WCAG AAA contrast?
WCAG AAA is the enhanced accessibility level requiring 7:1 for normal text and 4.5:1 for large text. AAA is optional for most websites but recommended for text-heavy content, news sites, and government portals. It is especially important for users with severe visual impairments.
How is the contrast ratio calculated?
Contrast ratio = (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter colour and L2 is the relative luminance of the darker colour. Relative luminance converts each RGB channel using a gamma-correction formula from the WCAG specification.
Does colour contrast affect SEO?
Google uses accessibility as part of its quality signals for Core Web Vitals and page experience ranking. While contrast ratio is not a direct ranking factor, Lighthouse accessibility audits flag contrast failures, and accessible, readable sites generally have lower bounce rates and better engagement metrics.

Related tools