Tools

WCAG Contrast Checker

Pick a foreground and background colour to instantly check contrast ratio and WCAG compliance across all levels — AA, AAA, normal text, large text, and UI components.

Foreground
Background
Aa

Normal text — 16px regular

Aa

Large text — 24px bold

6.29:1Good — passes AA
3:14.5:17:1
AA
Normal textUnder 18pt4.5:1
AA
Large text18pt+ or 14pt bold3:1
AA
UI componentsIcons, borders3:1
AAA
Normal textUnder 18pt7:1
AAA
Large text18pt+ or 14pt bold4.5:1

What is WCAG contrast?

The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios between text and its background to ensure readability for users with low vision or colour deficiencies. Contrast ratio is calculated from the relative luminance of two colours and expressed as a ratio from 1:1 (no contrast) to 21:1 (black on white).

The three thresholds

  • 3:1 — Minimum for large text (18pt+, or 14pt bold) and UI components like form inputs and icons. This is WCAG 2.1 Level AA for non-text contrast.
  • 4.5:1 — Minimum for normal body text at Level AA. This is the most commonly referenced threshold and the one most design systems target by default.
  • 7:1 — Enhanced contrast for Level AAA. Required for normal text in the highest accessibility tier. Large text only needs 4.5:1 at AAA.

Why it matters

Approximately 1 in 12 men and 1 in 200 women have some form of colour vision deficiency. Low contrast text can be unreadable in bright sunlight, on low-quality displays, or for users with cataracts. Meeting AA is a legal requirement in many jurisdictions under standards like EN 301 549 (EU) and Section 508 (US). AAA is best-effort and recommended for critical content like error messages and form labels.