All tools

Color Contrast Checker

WCAG contrast ratios for text on backgrounds.

The quick brown fox jumps over the lazy dog. (regular text)

The quick brown fox. (large text)

Contrast ratio

17.40:1

WCAG AA · normalPassWCAG AA · largePassWCAG AAA · normalPassWCAG AAA · largePass

About

Pick a foreground and background color. The tool calculates the contrast ratio and tells you which WCAG levels pass for normal text and large text. Tweak the colors live until you hit AA or AAA.

How to use

  1. Pick a text color and a background color.
  2. See the contrast ratio and WCAG pass/fail badges (AA/AAA, normal/large).

FAQ

What ratios do I need?+

WCAG AA: 4.5:1 for normal text, 3:1 for large text (18pt or larger, or 14pt bold). AAA: 7:1 normal, 4.5:1 large. Most quality design systems target AA at minimum.