Color tools

Color Contrast Checker: WCAG AA and AAA

Free, no sign-up, works in your browser. Check whether text is readable on its background with the WCAG contrast ratio, see AA and AAA results for normal text, large text and controls, and get the closest colour that passes.

Large text reads like this

Normal body text looks like this. A quick brown fox jumps over the lazy dog, and small print, like a caption, sits underneath.

Small text: 14px caption.

Button
Contrast ratio13.08:1
  • Normal text, AA: PassBody text, at least 4.5:1
  • Normal text, AAA: PassEnhanced, at least 7:1
  • Large text, AA: Pass18pt+, or 14pt+ bold, at least 3:1
  • Large text, AAA: PassEnhanced, at least 4.5:1
  • Icons and controls, AA: PassButtons, borders, chart lines: 3:1

Uses the WCAG 2 contrast formula. Ratios are never rounded up, so 4.49:1 doesn’t count as 4.5:1. Checked on your device.

How to use the Color Contrast Checker

  1. Enter the text colour and the background colour, or pick them.
  2. Read the contrast ratio and the pass or fail results.
  3. If it fails, click a suggested colour that passes.

Frequently asked questions

What contrast ratio do I need?
WCAG AA asks for 4.5:1 for normal text and 3:1 for large text and interface parts like buttons and icons. AAA asks for 7:1 and 4.5:1.
What counts as large text?
At least 18 point (24px) regular, or 14 point (about 18.7px) bold.
Does it handle transparent text colours?
Yes. A see-through text colour is blended with the background before contrast is measured.
Why does 4.49:1 fail?
WCAG says ratios must not be rounded up, so anything below 4.5:1 doesn't meet AA for normal text.
Is the Color Contrast Checker free?
Yes. It's free to use, with no sign-up and nothing to install.

Related tools