Skip to main content
T

Color Contrast Checker (WCAG)

Pick a foreground and background color and instantly see the WCAG 2.1 contrast ratio with pass/fail badges for AA and AAA, normal and large text. Includes a live preview.

Contrast ratio
21.0:1
AA Normal
—
≥ 4.5:1
AA Large
—
≥ 3:1
AAA Normal
—
≥ 7:1
AAA Large
—
≥ 4.5:1

Normal body text — The quick brown fox jumps over the lazy dog.

Large heading — Sample preview

Large text = 18pt+ or 14pt+ bold. WCAG 2.1 thresholds.

Advertisement

How to use Color Contrast Checker

  1. Pick foreground and background colors.
  2. Read the contrast ratio and pass/fail badges.
  3. Use Swap or Invert FG to test alternates.

What is Color Contrast Checker?

WCAG 2.1 defines contrast minimums for legible text: 4.5:1 for normal text (AA), 3:1 for large text (AA), 7:1 for normal (AAA), 4.5:1 for large (AAA). Large text is defined as 18pt+ or 14pt+ bold. This tool computes the ratio using the relative-luminance formula from the WCAG spec.

Advertisement

FAQ

What is large text?
18pt+ (24px) regular weight, or 14pt+ (18.66px) bold. Most h1/h2 elements qualify.
What about non-text UI elements?
WCAG 2.1 requires 3:1 contrast for UI components (button borders, form-field outlines) and meaningful icons. The AA Large badge approximates this.

Related tools

← Back to Developer Tools · All tags