Ask why a color contrast checker is flagging your carefully chosen color pair as a failure, and the honest answer is usually that the pairing looks perfectly readable to you but fails a specific, standardized mathematical threshold that doesn't always match casual visual impression. Understanding what that threshold is actually measuring — and why it exists — makes the requirement feel less arbitrary and considerably easier to work with.
Why "looks readable to me" isn't a sufficient standard
Readability is genuinely subjective in casual conversation, but accessibility guidelines need something more precise and consistently measurable than one person's subjective visual impression, because that impression varies enormously based on the specific individual's vision, the display they're viewing on, and the lighting conditions in the room — none of which a design decision can control for in advance. The Web Content Accessibility Guidelines (WCAG) address this by defining a specific mathematical contrast ratio formula, calculated from the relative luminance of the foreground and background colors, giving a single objective number that can be checked consistently regardless of who's looking or under what conditions.
How the contrast ratio is actually calculated
The formula computes the "relative luminance" of each color — roughly, how bright that color appears to the human eye, accounting for the fact that human vision perceives green as considerably brighter than an equally-intense blue or red, so the calculation weights the color channels differently rather than treating red, green, and blue as equally contributing to perceived brightness. The ratio between the lighter and darker color's luminance values produces a single number ranging from 1 (identical colors, no contrast at all) to 21 (pure black against pure white, the maximum possible contrast).
WCAG defines specific minimum ratios for different situations: a ratio of at least 4.5:1 for normal-sized body text at the standard "AA" compliance level, a somewhat more lenient 3:1 for large text (since larger text remains legible at lower contrast than small text does), and a stricter 7:1 threshold at the higher "AAA" compliance level for normal text. These aren't arbitrary round numbers — they were derived from research on what contrast level meaningfully supports readability for people with common forms of low vision, including many forms of color vision deficiency and general age-related vision decline.
Why two colors that "look fine" can still technically fail
A specific, common surprise: two mid-toned colors of noticeably different hues — a medium blue text on a medium orange background, for instance — can look perfectly distinguishable to someone with typical color vision while still failing the numerical contrast ratio, because the formula is measuring luminance (perceived brightness) specifically, not hue difference. Two colors can be very different hues while having quite similar luminance values, and it's specifically luminance contrast — not color difference in general — that the WCAG formula and the broader accessibility guidance are built around, since luminance contrast is what actually determines legibility for someone with reduced ability to distinguish hues, which color-difference alone doesn't capture.
This is also why relying on color alone to convey information is a separate, related problem
A closely related but distinct accessibility guideline states that information shouldn't be conveyed through color alone — a form field turning red to indicate an error, with no additional text label or icon reinforcing that meaning, is inaccessible for anyone who can't reliably perceive that specific color difference, regardless of what the underlying contrast ratio between that red and the surrounding colors happens to measure. Contrast ratio and color-alone reliance are two separate accessibility considerations that often get raised together, since they both trace back to the same underlying concern: not every viewer perceives color and brightness the same way, and design decisions that assume typical color vision as a universal baseline exclude a meaningful share of real users.
Practical strategies for fixing a failing pair
When a color pairing fails the contrast check, the most direct fix is usually adjusting the lightness of one or both colors — darkening the text, lightening the background, or both — while keeping the hues themselves largely intact, since it's specifically the luminance gap that needs to widen, not necessarily the hue. A design system built around HSL color values (discussed in more detail in an earlier post on this blog) makes this adjustment particularly straightforward, since lightness is one of HSL's three explicit, independently adjustable components, rather than requiring you to recalculate all three RGB channels together to achieve the same brightness shift.
Checking your own color pairs
Our contrast checker calculates the exact WCAG contrast ratio for any two colors and tells you directly whether the pairing passes AA or AAA level for normal and large text, which is a considerably more reliable way to verify accessibility compliance than trusting visual impression alone, for exactly the reasons covered above.