Color Contrast Checker
Check WCAG color contrast anywhere on your screen - not just inside a browser. Pick any foreground and background pixel and TheWCAG shows the exact contrast ratio, whether it passes WCAG 2.2 AA and AAA, and the APCA Lc score.
How it works
- 1. Freeze the screen. A magnified loupe appears so you can target the exact pixel.
- 2. Click the text color, then the background. Drag across a gradient to find the worst-case pixel automatically.
- 3. Read the verdict. Ratio, AA/AAA pass or fail for normal and large text, and APCA - instantly.
- 4. Fix it. One click suggests the nearest passing color.
WCAG contrast thresholds
| Content | AA | AAA |
|---|---|---|
| Normal text (< 18.66px bold / 24px) | 4.5:1 | 7:1 |
| Large text (≥ 18.66px bold / 24px) | 3:1 | 4.5:1 |
| UI components & graphics | 3:1 | - |
Full breakdown in the WCAG contrast guide.
Frequently asked questions
- What is a good color contrast ratio?
- WCAG 2.2 AA requires at least 4.5:1 for normal text and 3:1 for large text (18.66px bold or 24px regular) and UI components. AAA raises normal text to 7:1. TheWCAG shows the ratio and the pass/fail verdict for each level as you pick.
- Can I check contrast outside the browser?
- Yes. Unlike web-only tools, TheWCAG is a native desktop app, so you can sample colors from any application - design tools, native apps, PDFs, video - anywhere on screen.
- Does it support APCA?
- Yes. Alongside the WCAG 2.x ratio, TheWCAG reports the APCA Lc value (the contrast model proposed for WCAG 3) so you can compare both.
- Is it free?
- The contrast picker, color-blindness lens, and annotation tools are free. An account is only needed to publish shareable report links.