WCAG contrast checker
Pick a foreground and background. The page computes relative luminance per WCAG 2.1 and the contrast ratio (L1 + 0.05) / (L2 + 0.05).
AA normal text needs 4.5:1, large text 3:1, AAA normal 7:1. This is two solid sRGB colors — not gradients, images, or translucent overlays.
How to Use
- Set text (foreground) and background hex or use the color pickers.
- Read the ratio and the AA/AAA badges.
- Try a preset if you want a known pair.
- Adjust until the level you need passes. Recheck in context — real UI has more than two colors.
Key Features
- WCAG 2.1 AA and AAA thresholds
- UI / non-text 3:1 check
- Live preview swatch
- Entirely local
Frequently Asked Questions
Does a pass mean the page is accessible?
No. Contrast is one checkpoint. You still need focus states, labels, keyboard paths, and real assistive-tech testing.
What is large text?
WCAG: at least 18pt regular or 14pt bold (roughly 24px / 18.5px).
Can I test a screenshot?
Not in this tool. Sample the two hex values with the color picker first.