Color Contrast Checker
Check readability, preview real use, and repair color pairs without leaving your workspace.
Advanced checksAudit a complete color system
Text sample
Contrast ratio · 16px / 400 · normal text8.42:1
The quick brown fox stays readable.
Pass for selected textNormal text AAPass
Normal text AAAPass
Large text AAPass
Large text AAAPass
UI graphicsPass
READABILITY, EXPLAINED
Contrast is a starting point.
WCAG contrast compares relative luminance. Normal text needs 4.5:1 for AA and 7:1 for AAA; large text and meaningful interface graphics need at least 3:1.
Passing color contrast does not replace testing type size, weight, states, focus indicators, glare, material finish, or real lighting.
- Choose a pair.Enter text and background colors.
- Preview its job.Compare regular, large and interactive text samples.
- Repair with intent.Use the closest passing suggestion, then verify the final design.