Design tools

Colour Contrast Checker

Check WCAG contrast ratios between text and background colours — 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 colours first? Try Get Color Palette from Logo or Get Color Palette from Image, then paste hex values here.

How it works

Pick a text colour and background colour using the swatch or by typing a hex code, RGB value, or CSS colour 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 colours to test the reverse combination.
  • Compare brand swatches from our colour palettes.
↑