What the ratio means
A WCAG contrast ratio is a comparison of the relative luminance of two colors. Relative luminance is a value between 0 (absolute black) and 1 (absolute white) that models how much light a color appears to emit, adjusted for human perception.
The formula is straightforward:
Contrast ratio = (L1 + 0.05) / (L2 + 0.05)Where L1 is the lighter color’s luminance and L2 is the darker. The 0.05 offset prevents division by zero and models ambient light.
The resulting ratio runs from 1:1 (identical colors — no contrast) to 21:1 (black on white — maximum contrast).
The two levels
AA (minimum, 4.5:1) — Required for normal text (under 18pt or 14pt bold). For large text (18pt+ or 14pt+ bold), the threshold drops to 3:1. The most common compliance target for websites.
AAA (enhanced, 7:1) — Required for normal text at the highest accessibility level. 4.5:1 for large text. WCAG itself notes that AAA cannot be achieved for all content, particularly for photographs.
A few practical numbers to calibrate against:
| Pair | Ratio | Level |
|---|---|---|
| White on white | 1:1 | Fail |
#9C9A93 on #EDEAE0 | ~2.8:1 | Fail |
#58564F on #EDEAE0 | ~5.3:1 | AA pass |
#181716 on #EDEAE0 | ~16.7:1 | AAA pass |
Where the standard falls short
WCAG 2.1’s contrast algorithm was developed in the early 2000s. It has two well-known limitations:
1. It does not account for light text on dark backgrounds well. White text on a medium-dark color can fail WCAG while being perfectly legible. Dark text on a bright color can pass WCAG while being uncomfortable to read in high-ambient-light conditions.
2. It treats all text the same size equally. A 12px thin-weight label and a 12px medium-weight label have very different legibility, but the same WCAG ratio applies to both.
These limitations are worth knowing — a pair that passes numerically may still feel uncomfortable in certain conditions, and a pair that fails may be perfectly legible at large sizes. Use the ratio as a floor, not a ceiling.
The uicorn WCAG Contrast Checker shows WCAG 2.1 ratios with suggested color adjustments for failing pairs.
How to use the contrast checker in practice
During palette definition. Before locking down a brand palette, check every text-on-background combination you plan to use. Common failures: medium grey body text on cream backgrounds, amber on white, teal on dark grey.
During component design. Check each component state: default, hover, disabled, error. Disabled states often use 40% opacity, which can push ratios below AA.
For dark mode. Dark-mode palettes have different contrast dynamics. A color that passes easily on white may struggle on a dark surface. Run both modes through the checker.
Use the failing color suggestions. The tool shows adjusted color values that bring a failing pair to AA or AAA. These are a starting point — adjust further for brand fit, but they give you the right direction immediately.
The design argument for good contrast
Beyond compliance, contrast is legibility. Text that requires effort to read creates friction — and at scale, across an entire application and across users of every age and screen quality, that friction compounds into something that costs real people real time.
The best design systems treat contrast not as a constraint but as a foundation. When your text-on-background ratios are locked in early, every component that inherits those color decisions is automatically legible. When they are not, you are auditing and patching forever.
Run the checker early, during palette definition. The tool shows adjusted color values that bring a failing pair to AA or AAA — use those as your starting point, not your answer, and adjust from there for brand fit.
Check any color pair with the WCAG Contrast Checker — get WCAG 2.1 AA/AAA results with failing color suggestions.