About Color Contrast Checker

Color Contrast Checker takes a text colour and a background colour and tells you the WCAG 2.1 contrast ratio and whether it passes at AA and AAA, for normal text, large text, and user-interface elements. It is the check accessibility audits run.

The calculation is done in the page. Nothing you enter is uploaded.

How to use it

  1. Set the text colour and the background colour, by picker or by typing a value.
  2. Read the ratio. 1:1 is invisible, 21:1 is black on white.
  3. Check the pass or fail line for the case you care about.

Common questions

What are the thresholds?

AA needs 4.5:1 for normal text and 3:1 for large text; AAA needs 7:1 and 4.5:1. Borders, icons, and focus rings need 3:1.

What counts as large text?

About 24px, or 19px and bold, and above.

How is a transparent colour handled?

It is compared as if fully opaque. Flatten it against the real background first for an exact figure.

Is contrast all that matters for readability?

No. Font weight, size, spacing, and the surrounding design matter too, but contrast is the measurable baseline.