Contrast Checker

Questions

How do I enter the colors?

Pick one with the swatch, or type a hex value in the field beside it. Both stay in sync. #fff and #ffffff both work, with or without the #.

What do AA and AAA mean?

They're the two WCAG levels for contrast. AA is the usual target: 4.5:1 for normal text and 3:1 for large text (18pt, or 14pt bold). AAA is stricter: 7:1 and 4.5:1.

What if no passing color exists?

The tool says so and shows the best ratio possible. Against a mid-grey background, 7:1 may be out of reach in both directions.

Why is the suggested color sometimes very different?

It first looks for your color with a different lightness. If none of those passes, it picks another color that does, and tells you it did.