What contrast ratio do I need to meet WCAG AA?

Normal text needs at least 4.5:1 and large text (18pt regular or 14pt bold, about 24px / 18.66px) needs at least 3:1. AAA raises those thresholds to 7:1 and 4.5:1 respectively.

Does the checker count transparency?

No — the ratio is computed between two opaque colors. If you use semi-transparent text, composite it against the actual background first and check the resulting opaque color.

Why does my brand color fail for small text?

Many saturated brand colors land around 3:1 against white, which passes AA for large text but fails for body copy. Darken the brand color for body text or reserve it for headings and buttons above 18pt.

Color Contrast Checker

Check foreground and background color pairs against WCAG 2.1 AA and AAA contrast requirements.

Foreground (Text)

H217

S33

L17

Background

H210

S40

L98

Contrast Ratio

13.98:1

AA Normal TextPASS

Minimum for body text (< 18pt / 14pt bold) (≥ 4.5:1)

AA Large TextPASS

Minimum for large text (≥ 18pt / 14pt bold) (≥ 3:1)

AAA Normal TextPASS

Enhanced contrast for body text (≥ 7:1)

AAA Large TextPASS

Enhanced contrast for large text (≥ 4.5:1)

Text Preview

Large Text Preview (24px Bold)

Large text is defined as 18pt (24px) or larger, or 14pt (18.66px) bold or larger. This text qualifies as large text under WCAG guidelines.

Normal text preview (14px) — Most body copy on the web falls into this category. Normal text has stricter contrast requirements than large text because smaller characters are harder to distinguish at lower contrast levels.

Inverted Preview

The same color pair reversed — foreground as background and vice versa. The contrast ratio is identical regardless of which color is on top.

Color Contrast Checker

Text Preview

Related tools