What does Color Contrast Checker actually do?

The contrast checker computes the WCAG contrast ratio between a foreground and a background and reports AA/AAA for normal and large text. It does not see your font size, font weight, or surrounding UI. A pass at AAA large text is not a pass for 14px body text.

When should I use Color Contrast Checker?

Use it while picking text and background tokens.

When should I not use Color Contrast Checker?

Do not mark a design done from a large-text AAA badge if the real text is small.

What does Color Contrast Checker not do?

Ratio is for the two colors you enter, not a screenshot. Non-text UI icons use different thresholds than body text.

Color Contrast Checker

Check WCAG 2.1 contrast ratio between two colors. Get AA/AAA pass/fail for normal and large text. Free online — runs locally, no upload.

Foreground (text)

Background

Contrast Ratio

16.44:1

WCAG Grades

AA (normal text)Pass

AA (large text)Pass

AAA (normal text)Pass

AAA (large text)Pass

UI componentsPass

Preview

The quick brown fox jumps over the lazy dog.

Large Text

Button

WCAG 2.1 Reference

7:1 — AAA (normal text)
4.5:1 — AA (normal text), AAA (large text)
3:1 — AA (large text ≥18pt or 14pt bold), UI components
Large text = ≥18pt (24px) regular, or ≥14pt (18.5px) bold

Search tools

Color Contrast Checker