Roughly 1 in 12 men and 1 in 200 women have some form of color vision deficiency. That's over 300 million people worldwide who might struggle to read your content if the contrast isn't strong enough. Even for people with normal vision, low-contrast text causes eye strain and makes content harder to scan.
Our Color Contrast Checker uses the WCAG (Web Content Accessibility Guidelines) formula to calculate the luminance ratio between two colors. Enter any foreground and background hex values and see instantly whether your combination passes AA or AAA standards.
What the Numbers Mean
- 4.5:1 (AA Normal) - The minimum contrast ratio for body text under WCAG AA compliance.
- 3:1 (AA Large) - The minimum for large text (at least 18pt bold or 24pt regular).
- 7:1 (AAA Normal) - Enhanced contrast for users with low vision. Ideal for long-form content.
- 4.5:1 (AAA Large) - Enhanced contrast for large text under AAA standards.
How the Calculation Works
The formula starts by converting hex colors to relative luminance using the sRGB color space. Each RGB channel is linearized (raised to the power of 2.2 roughly), then weighted by how sensitive the human eye is to that color - red (21%), green (72%), and blue (7%). The ratio is simply (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color.
Everything runs locally in your browser. Your colors never leave your device.