WCAG Contrast Checking: A Practical Guide
Published 2026-07-15
Contrast ratio isn't just a compliance checkbox, it's the difference between text people can read and text they can't. Here's how it's calculated and what the thresholds actually mean.
Why contrast matters
Text that doesn't contrast enough with its background is hard to read for everyone, and can be completely unreadable for people with low vision or color blindness. The Web Content Accessibility Guidelines (WCAG) set minimum contrast ratios specifically so that text remains legible for the widest possible range of visual abilities, and meeting them is both a genuine usability improvement and, in many jurisdictions, a legal requirement for public- facing websites.
How contrast ratio is actually calculated
Contrast ratio is a comparison between the relative luminance (perceived brightness) of the text color and the background color, expressed as a ratio from 1:1 (identical, no contrast at all) to 21:1 (pure black on pure white, maximum possible contrast). It isn't a simple brightness comparison, luminance is calculated using a formula that weights red, green, and blue differently, since the human eye perceives green as brighter than red or blue at the same intensity, and it applies a gamma correction to account for how monitors actually display color. You don't need to calculate this by hand, but knowing that it's about perceived brightness (not just raw RGB values) helps explain some genuinely counterintuitive results, like why certain mid-tone colors that look reasonably distinct can still fail.
The actual thresholds
WCAG 2.1 defines two conformance levels. AA, the standard most organizations target, requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (defined as 18pt regular or 14pt bold and larger). AAA, a stricter level, requires 7:1 for normal text and 4.5:1 for large text. Most legal accessibility requirements (like the ADA in the US, as interpreted through WCAG, or the EN 301 549 standard in the EU) reference AA as the baseline, AAA is generally treated as a stretch goal rather than a strict requirement.
Common contrast mistakes
Light gray text on a white background is the single most common failure, it often looks "clean" and "modern" in a design mockup but fails AA badly and is genuinely hard to read for many users. Placeholder text inside form fields is frequently too low-contrast, and since it disappears once you start typing, designers often don't notice it's a problem. Text overlaid on photos or gradients is risky because the contrast ratio can pass in one area of the image and fail in another, adding a solid-color overlay or text shadow behind the text is a common fix. Brand colors, especially pastel or mid-saturation brand palettes, frequently fail contrast requirements when used as text color and need a darker or lighter variant reserved specifically for text.
How to check your own colors
Pick your foreground (text) color and background color, then check the resulting ratio against both the AA and AAA thresholds for the text size you're using. If a combination fails, the most reliable fix is usually to darken the text color (for light backgrounds) or lighten it (for dark backgrounds) until it clears the threshold, rather than changing the background, since the background color is often more tied to brand identity than the text color is.