a11y.skipToMainContent
1

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.

Was this tool helpful?
Send output to:
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

Author

MW
Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

📖 Color Contrast Checker on Wikipedia·Developer Tools on Wikipedia·Color Contrast Checker on Britannica

People also use

← Back to Developer Tools · All tags
Advertisement