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 and the ratio plus AA / AAA pass-fail results update as you change them.
Key features
- Foreground and background color inputs plus HEX text fields.
- Swap colors control to flip text and background in one click.
- Live contrast ratio using the W3C relative-luminance formula (WCAG 2.1).
- AA and AAA pass-fail badges for normal and large text.
- Live sample preview of normal and large text in the colors you chose.
WCAG pass thresholds
| Text size | AA passes at | AAA passes at |
|---|---|---|
| Normal text | >= 4.5 | >= 7.0 |
| Large text | >= 3.0 | >= 4.5 |
Common use cases
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. Use the live preview to judge readability for normal and large text.
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.
Privacy
Everything runs in the browser with no upload and no account, and closing the tab discards your color picks.
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.