Make your text readable for everyone
This color contrast checker measures the WCAG contrast ratio between any two colors and tells you immediately whether the pair passes WCAG 2.1 Level AA and AAA for normal text, large text, and user-interface components. Sufficient contrast is what makes text legible for users with low vision, color vision deficiency, or anyone reading on a glary phone screen outdoors — and it is a legal accessibility requirement in many jurisdictions. Pick your colors and read the verdict; all of the math happens locally in your browser with a live preview.
How the WCAG contrast ratio is calculated
Contrast is the ratio of the relative luminance of the lighter color to the darker color, nudged by a small constant so the scale runs cleanly from 1:1 (identical colors) to 21:1 (pure black on pure white):
Relative luminance L is not a simple average of the RGB channels. Each sRGB channel is first linearised to undo gamma encoding, then the channels are weighted by how strongly the human eye perceives them — green counts far more than blue:
L = 0.2126 × R_lin + 0.7152 × G_lin + 0.0722 × B_lin
That green-heavy weighting is why yellow text on white fails badly (yellow is very luminous) while the same-looking blue on white can pass.
The WCAG thresholds
| Level | Normal text | Large text | UI / graphics |
|---|---|---|---|
| AA | 4.5:1 | 3:1 | 3:1 |
| AAA | 7:1 | 4.5:1 | — |
Large text is at least 18pt (24px) at regular weight, or 14pt (~18.7px) at bold weight. The non-text contrast rule (WCAG 1.4.11) requires 3:1 for the boundaries of UI components like input borders, focus rings, icons, and chart elements.
Practical tips to fix failing contrast
- Darken the text or lighten the background in small steps — even a 5–10% lightness change often crosses the 4.5:1 line.
- Do not rely on hue alone. Two colors with similar luminance (e.g. medium red and medium green) can have terrible contrast even though they look different to people with full color vision.
- Watch placeholder and disabled text — the most commonly failed elements on real sites are gray-on-gray hints and ghost buttons.
- Test against the actual background, including gradients and image overlays; sample the lightest and darkest points the text sits on.
- Large headings can use lower contrast, so you have more color freedom for display type than for body copy.
Why contrast matters beyond compliance
Roughly 1 in 12 men and 1 in 200 women have some form of color vision deficiency, and a far larger share of users read in poor lighting or with aging eyes. Meeting WCAG AA isn't just box-ticking for ADA, the European Accessibility Act, or India's RPwD guidelines — higher contrast measurably improves comprehension and conversion for all users. Pair this checker with the aspect ratio calculator and subnet calculator in the free DevCalc hub.