Free Design tool
Color Contrast Checker
Pick any foreground and background color and get the exact WCAG contrast ratio, with AA and AAA verdicts for normal and large text.
Large text sample
The quick brown fox jumps over the lazy dog. Body-sized copy to verify comfort at paragraph scale.
Contrast ratio
19.42:1
WCAG AA — Normal text (≥ 4.5)Pass
WCAG AA — Large text (≥ 3)Pass
WCAG AAA — Normal text (≥ 7)Pass
WCAG AAA — Large text (≥ 4.5)Pass
WCAG contrast thresholds
- AA Normal text: ratio ≥ 4.5 (body copy under 18pt / 14pt bold)
- AA Large text: ratio ≥ 3 (headings 18pt+ / 14pt bold+)
- AAA Normal text: ratio ≥ 7 (stricter, for critical copy)
- AAA Large text: ratio ≥ 4.5
When AA is enough vs when to aim for AAA
AA is the industry default and what most accessibility audits measure against. Go AAA for government sites, healthcare, finance, and any product used by older adults or anyone with low vision. For marketing sites, AA body + AAA large is a good compromise.
Common mistakes
- Muted grays on white —
#999is ~2.8:1 on white. Fails. - Brand color on dark backgrounds — check both directions.
- Focus rings that only work in one color theme
Prefer someone else does this?
Hire a Webflow developer for a flat monthly rate.
Unlimited pages. One request at a time. 48-hour turnaround. Pause or cancel any time.