Test any text and background color pair against WCAG 2.1 accessibility standards. See the exact contrast ratio, AA/AAA pass-fail results, and a live preview of how your combination actually reads.
Large text: The quick brown fox jumps over the lazy dog
Normal text: Readability isn't a matter of taste — at this size, this exact color pair is what a visitor with typical vision, low vision, or a cheap phone screen in sunlight has to read. If it passes 4.5:1, nearly everyone can.
The WCAG contrast ratio compares the relative luminance of two colors — how bright each appears to the human eye, with green weighted heaviest and blue lightest, matching how our vision works. The scale runs from 1:1 (identical colors, invisible text) to 21:1 (pure black on pure white). The thresholds aren't arbitrary: 4.5:1 approximates the contrast a person with 20/40 vision — typical for a healthy 80-year-old — needs to read comfortably. Roughly one in twelve men has some color vision deficiency, low-vision users number in the hundreds of millions, and every user becomes "low vision" on a glossy screen in sunlight. Contrast is the accessibility fix that helps all of them at once.
WCAG AA (4.5:1 for body text, 3:1 for large text) is the compliance bar written into most law and policy — the ADA in US case law, the European Accessibility Act, and Section 508 for government work all point to it. It's the standard to design to by default. AAA (7:1) is the enhanced tier for contexts where reading is the whole product — documentation, news, long-form content. "Large text" means 18pt (24px) regular or 14pt (18.7px) bold and larger; headlines qualify, body copy doesn't. Since WCAG 2.1, non-text elements matter too: icons, input borders, and focus indicators need 3:1 against adjacent colors — a rule most designs silently fail on disabled-looking grey form borders.
The trick is that contrast lives almost entirely in the lightness channel, not the hue. Keep your brand hue and darken the text (or lighten the background) until the ratio passes — convert the color to HSL in our Color Converter, nudge the L value, and re-test here. A brand blue of hsl(215, 80%, 55%) that fails on white at 3.9:1 passes at 55%→45% lightness with its character intact. Other reliable fixes: bump font weight or size across the large-text threshold, and never convey state by hue alone (the red/green problem) — pair color with an icon or label. Grey-on-grey aesthetics are where designs most often fail; #999 text on white is 2.8:1, elegant and unreadable. If you're building a palette from a photo with the Image Color Extractor, check every text-bearing pair before shipping.
Increasingly, yes: US courts apply the ADA to websites using WCAG AA as the reference, the European Accessibility Act enforces it for many businesses from 2025, and public-sector rules worldwide mandate it. Beyond law, low contrast measurably raises bounce rates — accessible text is just better UX.
No — 4.5:1 is a hard threshold, and audit tools flag 4.49 as a failure. The good news: the gap from 4.4 to 4.5 is usually a single lightness step, invisible to your design and decisive for compliance.
Fully — and dark themes fail in their own way: pure white text on pure black (21:1) can actually halo uncomfortably, while the fashionable grey-on-dark-grey pairs often sit below 4.5:1. Test your dark palette as its own set of combinations; don't assume inverting a passing light theme passes.
Measure against the worst pixel behind the text — which is usually unknowable, so designers add a scrim: a semi-dark overlay or solid text plate. Check your text color against the scrim color here, and you're safe on any photo.
Hue difference isn't luminance difference: pure red on pure blue looks vivid but measures about 2.1:1, because both are similarly dark to the eye. The ratio only rewards lightness separation — which is exactly what damaged or aging vision depends on.