What counts as good contrast? WCAG 2.2, AA, AAA, and why light grey on white isn't enough

Designers love elegant light grey on white. Users with low vision, older people, or anyone reading their phone in summer sunshine hate it. The Web Content Accessibility Guidelines (WCAG) have provided concrete numbers for years on when text is actually readable — and in the EU, the Accessibility Act has made contrast a legal requirement for many providers, not a nice-to-have.

Why contrast actually matters

About 8 percent of men and 0.5 percent of women have some form of color vision deficiency. Add people with cataracts, macular degeneration, or simply age-related vision loss — the WHO counts over 2.2 billion people worldwide with some visual impairment. Poor contrast systematically excludes this group, often without anyone in the design process noticing.

Even unimpaired users read low-contrast text noticeably slower and tire faster. Reading-speed studies show measurable degradation in word processing below 4:1 contrast. Anyone who thinks contrast is just an accessibility niche misses the point: better readability improves conversion rates, because users stay longer and stay focused.

The WCAG levels at a glance

WCAG defines three conformance levels: A (minimal), AA (the standard most sites aim for), and AAA (the highest level, rarely achieved across an entire site). For text contrast, the concrete minimum ratios between foreground and background color are:

• Level AA, normal text: at least 4.5:1 — this is the benchmark you should aim for.
• Level AA, large text (18 pt regular or 14 pt bold and up): at least 3:1 — headings and large buttons may be lighter.
• Level AAA, normal text: at least 7:1 — recommended for long-form reading, government portals, banking.
• Level AAA, large text: at least 4.5:1 — i.e. exactly what AA requires for normal text.
• Non-text elements (icons, controls, graphics, charts): at least 3:1 against the immediate surroundings (WCAG 1.4.11).

How the contrast ratio is calculated

The contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter and L2 the darker relative luminance. Luminance itself is weighted from the sRGB components — green has the biggest impact, red is middling, blue contributes the least. That's why pure blue on black often looks worse than its mathematically respectable ratio would suggest.

Values theoretically range from 1:1 (same color) up to 21:1 (black on white). 4.5:1 corresponds roughly to dark grey (#595959) on white — many designs land below that, especially for placeholder text, disabled buttons, or grey subtitles. A second in a contrast checker often saves hours in a later audit.

APCA — the successor for WCAG 3.0

The WCAG 2 formula has a known issue: with very light or very dark combinations it produces misleading values. Black text on bright yellow scores almost 20:1, but in dark mode comparisons often looks worse than a milder contrast. APCA (Advanced Perceptual Contrast Algorithm) models perception more accurately, accounts for font size and weight directly, and produces a value in perceptual lightness difference (Lc).

APCA is a candidate for WCAG 3.0 but not yet officially adopted. In practice: for legally binding conformance today, use WCAG 2.2; for dark mode design and fine-grained tuning, consult APCA as a second opinion. A good contrast tool can show both values side by side.

Legal framework in 2026

Across the EU, the European Accessibility Act took effect on 28 June 2025. It forces many providers — online shops, banking apps, travel and transport services, e-readers, many B2C services — to comply with the EN 301 549 standard, which requires WCAG 2.1/2.2 AA. Violations can be fined and, in extreme cases, lead to products being withdrawn from the market.

In the US, Section 508 has applied to federal agencies for decades, and the Americans with Disabilities Act has increasingly been applied to websites by the courts. If you serve an international audience, accessibility is no longer optional — and contrast is the low-hanging fruit that shows up first in any audit.

Common pitfalls

The following elements are missed in 90 percent of designs — check them specifically:

• Placeholder text in forms: often far too light grey by default (e.g. #999) — once it carries information, 4.5:1 applies.
• Focus indicators: the browser default outline often gets removed in CSS — its replacement must have at least 3:1 against the background (WCAG 2.4.11, new in 2.2).
• Disabled buttons: WCAG formally exempts them, but if users can't tell something is disabled, that's a usability bug. Pragmatically: at least 3:1.
• Brand colors on brand colors: logo colors love to migrate to buttons or text on colored backgrounds — almost always a contrast trap.

Frequently asked questions

Is it enough to hit AA everywhere?

For most commercial websites, yes. AA is the legally required standard under the European Accessibility Act, ADA, and EN 301 549. AAA is something you target voluntarily when long-form reading (magazines, blogs, knowledge bases) or safety-critical audiences (banking, health) are involved.

What if the brand color blows the ratio?

Then the brand color becomes a decorative accent and is not used for text. Practical example: bright orange as a button background with white text works; as a text color on white it doesn't. Many brand guides therefore define a second, darker variant explicitly for text — that should live in your design system by default.

How do dark mode and image backgrounds factor in?

Dark mode changes the game: light text on very dark backgrounds can appear blurry with thin fonts (halation). A slightly heavier font weight or a marginally lighter dark grey helps. Image backgrounds need a text shadow or a semi-transparent overlay box — measure contrast against the darkest spot behind the text.