Free Tool · Runs in your browser

Colour Contrast Checker

Check any text and background colour pair against WCAG 2.2 contrast ratios before it goes into a design or a codebase.

Try a pair

Preview

Large heading text

Normal body text. The quick brown fox jumps over the lazy dog, and the contrast ratio decides whether everyone can read it.

12.27:1

Contrast ratio. WCAG asks for at least 4.5:1 for normal text and 3:1 for large text.

  • PASS

    Normal text, AA (min 4.5:1)

    Body copy under 18pt (or 14pt bold).

  • PASS

    Normal text, AAA (min 7:1)

    Stricter target for long reading.

  • PASS

    Large text, AA (min 3:1)

    18pt+ or 14pt bold, and UI components.

  • PASS

    Large text, AAA (min 4.5:1)

    Stricter target for headings.

Ratios follow the WCAG 2.x relative luminance formula. Semi-transparent colours are not supported; enter the blended colour instead.

More free tools