Pick a foreground and background color; the ratio and AA / AAA pass-fail results update as you change them.
Color Contrast Checker (WCAG)
Check the contrast ratio between text and background colors against WCAG AA and AAA.
Pick a foreground and background color; the ratio and AA / AAA pass-fail results update as you change them.
Use the live preview to judge readability for normal and large text.
Everything runs in the browser - no upload and no account. Ratios use the W3C relative-luminance formula from WCAG 2.1. Closing the tab discards your color picks.
Typical use: validating a button label against its fill, checking body text on a brand background, or confirming large headings still meet AA before you ship CSS. For step-by-step clicks see the step-by-step guide; for when this fits versus desktop apps see when to use and vs alternatives.
Frequently Asked Questions
What does Color Contrast Checker (WCAG) do?
Check the contrast ratio between text and background colors against WCAG AA and AAA.
How do I use the checker?
Pick a foreground and background color; the ratio and AA / AAA pass-fail results update as you change them.
What formula does the ratio use?
Ratios use the W3C relative-luminance formula from WCAG 2.1.