Accurate WCAG Math
Uses the official relative luminance and contrast ratio formulas from the WCAG 2.1 specification.
Color Picker + Hex Input
Pick colors visually or type exact hex codes — both stay in sync instantly.
AA & AAA Pass/Fail
Instantly see pass or fail for normal and large text at both WCAG conformance levels.
Live Preview
See exactly how your color combination looks in normal and large text sizes.
One-Click Swap
Instantly swap foreground and background colors to compare both directions.
100% Private
All calculations happen in your browser — no colors are ever sent anywhere.
The Complete Guide to WCAG Color Contrast
Low-contrast text is one of the most common accessibility failures on the web, making content difficult or impossible to read for users with low vision, color blindness, or anyone using a screen in bright light. This tool computes the exact WCAG 2.1 contrast ratio between your foreground and background colors and tells you whether it meets accessibility standards.
Why UtilityX is Different
- ✅ Official WCAG 2.1 Formula
- ✅ 100% Free Forever
- ✅ Zero Server Uploads
- ✅ AA + AAA Pass/Fail
- ✅ Unlimited Daily Use
- ✅ No Account Needed
How the Contrast Ratio Formula Works
Each color is first converted to relative luminance by normalizing its R, G, and B channels to 0–1 and applying a gamma-correction curve. The contrast ratio is then (L1 + 0.05) / (L2 + 0.05), where L1 is the luminance of the lighter color and L2 is the luminance of the darker color. This produces a value from 1:1 (no contrast) to 21:1 (maximum possible contrast, black on white).
Understanding AA vs AAA
WCAG AA is the widely adopted baseline standard, required by most accessibility laws and guidelines, requiring 4.5:1 for normal text and 3:1 for large text. WCAG AAA is a stricter, enhanced standard requiring 7:1 for normal text and 4.5:1 for large text, recommended for content aimed at users with more significant visual impairments.