Contrast Checker

Check the contrast between a text colour and a background against WCAG 2.2, and get the nearest colours that pass.

Runs in your browser. Files are not uploaded.

How to use

  1. Choose or type the text and background colours.
  2. Check which levels pass.
  3. Use a suggested colour if it fails.

Questions

What contrast do I need?

4.5:1 for normal text and 3:1 for large text (AA), or 7:1 and 4.5:1 for the stricter AAA level. Icons and form borders need 3:1.

What counts as large text?

At least 24 px (18 pt), or 18.7 px (14 pt) if bold.

How are suggestions made?

By changing only the lightness of your text colour, so the hue stays the same.

More design tools