What is Color Contrast Checker?

The Color Contrast Checker evaluates the contrast ratio between foreground and background colors against WCAG 2.1 accessibility standards. It tells you instantly if your color combination passes AA or AAA guidelines for normal and large text.

How to use

1. Step 1 — Set the foreground (text) color using the color picker or by entering a HEX/RGB value.
2. Step 2 — Set the background color the same way. The contrast ratio and WCAG compliance grades update live.
3. Step 3 — Check the pass/fail badges for AA and AAA levels. Adjust colors until all relevant criteria pass.

Result

A designer tests dark gray text (#333333) on a light blue background (#E3F2FD) — the tool shows a 10.5:1 ratio, passing both WCAG AA and AAA for all text sizes.

Related Tools