Search tools

Search for a command to run...

Color Contrast Checker (WCAG)

Check text and background colors against WCAG 2.2 AA and AAA contrast requirements — with a live preview and a suggested fix when a pair fails.

How to use

  1. 1Pick or paste the text color and the background color.
  2. 2See the contrast ratio and pass/fail for normal text, large text and UI components. Use the suggested color if it fails.

How it's calculated

Contrast ratio = (L1 + 0.05) ÷ (L2 + 0.05), where L is the relative luminance of the lighter (L1) and darker (L2) color. AA needs 4.5:1 for normal text and 3:1 for large text; AAA needs 7:1 and 4.5:1.

Frequently asked questions

What counts as large text?

At least 18.66 px (14 pt) bold, or 24 px (18 pt) regular.

Do buttons and icons need contrast too?

Yes — WCAG 1.4.11 asks for 3:1 for UI components and meaningful graphics against adjacent colors.

Is passing contrast enough for accessibility?

It's one important part. Don't rely on color alone to convey meaning, and test with real users where possible.