Tool 04

WCAG Contrast Checker

Check a background and text color pair against WCAG 2.1 contrast requirements. Get the exact ratio and a pass/fail for AA and AAA.

Sample text Aa 123

What "AA" and "AAA" mean

WCAG (Web Content Accessibility Guidelines) defines a minimum contrast ratio between text and its background so people with low vision or color blindness can still read it. The ratio ranges from 1:1 (no contrast) to 21:1 (pure black on pure white).

LevelNormal textLarge text (18px+ bold, or 24px+)
AA (minimum)4.5 : 13 : 1
AAA (enhanced)7 : 14.5 : 1

Most organizations only need to meet AA — it's the level referenced by most accessibility laws, including the European Accessibility Act (EAA), which took effect for many digital products and services in mid-2025. AAA is a stricter bar mainly used by government sites or products specifically designed for low-vision users.

My colors pass AA but fail AAA — is that a problem?

Usually not. AA is the standard most legal and industry guidelines require. AAA is optional unless your product specifically targets accessibility-sensitive audiences (e.g. government, healthcare, or assistive-tech products).

Why did my colors fail even though they "look" different enough?

Contrast ratio is calculated from relative luminance, not how different two hues look to the eye. Two colors can look visually distinct but still have low luminance contrast — for example, a mid-tone orange on a mid-tone blue often fails even though the hues are clearly different.

Does this apply to large headings too?

Large text (18.66px bold or larger, or 24px+ regular) has a lower required ratio — 3:1 for AA — because bigger text is easier to read at lower contrast. This tool checks against the normal-text thresholds; for large-text-only content, a 3:1 AA pass is generally enough.