WCAG contrast checker
Make sure your text passes accessibility standards.
The quick brown fox
jumps over the lazy dog - Aa Bb 123
About this tool
Check the contrast ratio between two colors against WCAG accessibility guidelines. Tells you whether your text passes the AA or AAA standard for normal and large text - critical for making web content readable for users with low vision and color-blind users.
Privvert calculates the WCAG 2.1 contrast ratio (the same formula browsers and accessibility tools use), shows pass/fail badges for every category, and previews the actual text-on-background combination.
WCAG contrast ratios are calculated from the relative luminance of foreground and background colors. Privvert computes the ratio, checks it against both the legacy WCAG 2 thresholds (4.5:1 for normal text, 3:1 for large text) and the newer APCA contrast model used in WCAG 3 drafts, and shows you whether the pairing passes AA, AAA or APCA Bronze.
Features
- WCAG 2.1 contrast ratio calculation
- AA / AAA pass for normal and large text
- AA / AAA pass for non-text UI components
- Color pickers for foreground and background
- Live text preview at multiple sizes
- Suggested adjustments to reach passing ratios
- Browser-only - colors never uploaded
How to use it
- Pick foreground and background colors.
- Read the contrast ratio and pass/fail badges.
- Adjust until you hit your target standard.
Everything happens inside your browser using JavaScript and WebAssembly. Your files are never uploaded to a server, never stored, and never seen by us.
Frequently asked questions
WCAG AA requires 4.5:1 for normal text, 3:1 for large text (18pt+ regular, 14pt+ bold). AAA tightens to 7:1 for normal text, 4.5:1 for large. Aim for AA on every public site, AAA where possible.
18 point or larger regular weight, or 14 point or larger bold weight (in pixels: roughly 24px regular, 18.66px bold).
WCAG ratio is luminance-based, so it works across most color-blindness types. Use a color-blind simulator separately to spot hue-only distinctions that disappear for some users.
Use the brand color for backgrounds and accents; pair text with a darker/lighter variant for body copy. Most brand systems include accessible text colors derived from the primary palette.
It is the legal minimum in most jurisdictions and the right default to design against. But it is calibrated for sighted users without vision impairment; if your audience skews older or includes low-vision users, aiming for AAA (7:1) is meaningfully more accessible.
APCA (Accessible Perceptual Contrast Algorithm) is a newer model expected to replace the WCAG luminance ratio in WCAG 3. It accounts for font weight and size more accurately. For now, design to WCAG 2 AA and use APCA as a sanity check.