WCAG Color Contrast Checker
Pick a text color and a background color to get the contrast ratio and instant AA / AAA pass-fail. Runs in your browser, nothing is sent anywhere.
How to read the result
The contrast ratio runs from 1:1 (no contrast) to 21:1 (black on white). The higher the number, the easier it is to read, especially for people with low vision. WCAG sets these bars:
- AA, normal text — 4.5:1. The level most laws and standards reference. Aim for at least this on body text.
- AA, large text — 3:1. Large text (18pt / 24px regular, or 14pt / 18.66px bold) can pass at a lower ratio.
- AAA, normal text — 7:1. An enhanced level. Not required for general compliance, but good to hit on body copy where you can.
- AAA, large text — 4.5:1. The enhanced bar for large text.
- UI components & graphics — 3:1. Buttons, icons, form borders and other non-text elements need 3:1 against what's next to them.
This checks one pair. Loupe checks your whole site.
A single color pair is a great start. But a real page has dozens of them, plus missing alt text, unlabeled inputs and broken ARIA. Loupe scans your whole live site and finds every issue in plain English, with a report you can hand a client.
Add Loupe to Chrome — freeFree forever for scanning. Pro adds full-site crawl, AI fixes, and white-label PDF reports.
FAQ
What is a good color contrast ratio?
For level AA, aim for 4.5:1 on normal text and 3:1 on large text. The stricter AAA level wants 7:1 and 4.5:1. Higher is easier to read.
What's the difference between AA and AAA?
AA (4.5:1 normal, 3:1 large) is the standard target most laws reference. AAA (7:1 normal, 4.5:1 large) is an enhanced level, worth aiming for on body text but not required for general compliance.
What counts as large text?
At least 18pt (about 24px) regular, or 14pt (about 18.66px) bold. Large text passes AA at 3:1 instead of 4.5:1.
Does this send my colors anywhere?
No. It runs entirely in your browser. You can share a result by copying the link, which carries the colors in the URL.