Design tools

Color Contrast Checker

Check WCAG contrast ratios between text and background colors — AA and AAA pass/fail for normal text, large text, and UI components.

—

Contrast ratio

—

Sample heading

The quick brown fox jumps over the lazy dog.

Small print, captions and helper text sit at this size.

Button label

WCAG results

—AA normal text4.5:1
—AA large text3:1
—AAA normal text7:1
—AAA large text4.5:1
—UI components3:1
Need colors first? Try Get Color Palette from Logo or Get Color Palette from Image, then paste hex values here.

How it works

Pick a text color and background color using the swatch or by typing a hex code, RGB value, or CSS color name. The checker calculates the WCAG 2.1 contrast ratio and shows whether the pair passes AA and AAA for normal text, large text, and UI components.

WCAG thresholds

  • AA normal text — 4.5:1 or higher
  • AA large text — 3:1 or higher (18pt+ regular, or 14pt+ bold)
  • AAA normal text — 7:1 or higher
  • AAA large text — 4.5:1 or higher
  • UI components — 3:1 or higher

Tips

  • Link directly with URL parameters: ?text=374151&bg=ffffff
  • Use Swap colors to test the reverse combination.
  • Compare brand swatches from our color palettes.
↑