Color Contrast Ratio Calculator
Making Sure Text Is Actually Readable
Two colors can look visually distinct to a designer's eye and still fail to meet the contrast threshold that makes text legible for users with low vision or color blindness — which is why the Web Content Accessibility Guidelines (WCAG) define a precise, calculable contrast ratio rather than leaving it to subjective judgment.
The Formula
2. Relative Luminance L = 0.2126R′ + 0.7152G′ + 0.0722B′
3. Contrast Ratio = (Llighter + 0.05) ÷ (Ldarker + 0.05)
This is the WCAG 2.x contrast formula. The weighting coefficients (0.2126, 0.7152, 0.0722) reflect the fact that the human eye is more sensitive to green light than red or blue, so green contributes most to perceived luminance.
WCAG Pass Thresholds
| Level | Normal text | Large text |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
Worked Examples
| Color 1 | Color 2 | Ratio | AA Normal Text |
|---|---|---|---|
| #000000 (black) | #FFFFFF (white) | 21.00:1 | PASS |
| #2563EB (blue) | #FFFFFF (white) | 5.17:1 | PASS |
| #767676 (gray) | #FFFFFF (white) | 4.54:1 | PASS (barely) |
Black on white is the maximum possible contrast ratio at 21:1; #767676 gray on white is a commonly cited "just clears AA" gray often used as a minimum-contrast body text color.
Where This Matters
- Accessibility compliance — WCAG AA compliance is a common legal and contractual requirement for public-facing websites, and contrast failures are among the most frequent accessibility audit findings.
- Design system color tokens — verifying every approved text/background combination in a design system meets AA before it ships prevents accessibility issues from propagating across an entire product.
- Dark mode palettes — contrast ratios need separate verification for light and dark themes, since a pairing that works in one mode may fail in the other.
How to Use This Calculator
- Enter Color 1 as a hex code (#RRGGBB) or rgb(r, g, b) value.
- Enter Color 2 in the same format.
- Select Calculate to see the contrast ratio and pass/fail status against all four WCAG thresholds.
Related Calculations
Check how your layout adapts at different screen sizes with the Responsive Breakpoint Calculator, or plan grid spacing with the CSS Grid Calculator.