WCAG contrast checker

Test any foreground and background color pair for WCAG 2.1 contrast ratio (1 to 21). See pass/fail for Level AA and AAA, for normal text, large text (18pt+ or 14pt bold), and UI components.

How to check color contrast

1. Enter or pick foreground (text) and background colors.

2. Read the contrast ratio (e.g. 4.52:1).

3. Check AA and AAA rows for normal and large text sizes.

4. Adjust HSL lightness until required level passes, then copy hex values.

Contrast check examples

Body text #374151 on #FFFFFF

Ratio ≈ 8.9:1 — passes AAA for normal text (needs 7:1). Comfortable long-form reading.

Light gray #9CA3AF on white

Ratio ≈ 2.6:1 — fails AA for normal text (needs 4.5:1). Common placeholder mistake.

Primary button white on #2563EB

Ratio ≈ 4.6:1 — passes AA normal text; bump to darker blue for AAA or large-only use.

When to use this tool

• When you audit design system tokens before release.

• When you fix accessibility findings from Lighthouse or axe.

• When you choose link colors that must differ from body text, not only by hue.

WCAG 2.1 levels explained

Level A is minimum; AA is the legal target in many jurisdictions (ADA, EAA public sector). AAA is aspirational for body copy — large headlines may pass AAA easier than 14px captions. Focus visible indicators (2.4.7) complement contrast — keyboard users need visible focus rings, often 3:1 against adjacent colors. Document pass/fail in your design system next to each token pair.

Frequently asked questions

What contrast ratio for WCAG AA normal text?

At least 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt bold).

What for AAA?

7:1 normal text, 4.5:1 large text — stricter, often used for government sites.

Do UI components need contrast?

WCAG 2.1 requires 3:1 for graphical objects and UI component boundaries (1.4.11).

How is ratio calculated?

Based on relative luminance of sRGB colors: (L1 + 0.05) / (L2 + 0.05) where L1 is lighter.

Does underline fix low contrast links?

No — contrast still required. Underlines help non-color cues but do not replace ratio rules.