WCAG AA vs AAA: choosing contrast ratios for product UI

WCAG AA requires a 4.5:1 contrast ratio between text and its background, with 3:1 allowed for large text. AAA pushes the bar to 7:1 for normal text and 4.5:1 for large text. For most product UIs, AA is the right target. For regulated industries, government services, and anything subject to the European Accessibility Act, AAA is becoming the working baseline.

Most teams without a clear policy end up violating one or the other, then patching it on review. Better to make the call up front, document it in the design system, and pick a palette that hits the target from the start. Paletta helps with that last part; this guide handles the first two.

This guide covers the math behind AA and AAA, where each one applies, the legal landscape that's tightening through 2026, and how to verify any color pair fast. If you're building the underlying scale, see the guide to OKLCH shade scales for the lightness math that makes AA-safe pairings work in the first place.

The contrast math

WCAG defines contrast as a ratio between the relative luminance of two colors, on a scale from 1:1 (identical) to 21:1 (pure black on pure white). The formula uses sRGB-space luminance with a gamma correction, not raw RGB values, which is why "looks similar" is a poor stand-in for actual measurement.

Four numbers cover most cases:

• 4.5:1 for AA normal text (under 18pt regular, under 14pt bold)
• 3:1 for AA large text (18pt+ regular, 14pt+ bold) and for non-text elements like form borders, icons, and focus rings
• 7:1 for AAA normal text
• 4.5:1 for AAA large text

The 3:1 threshold for non-text elements often gets missed. Form input borders, focus indicators, button outlines on busy backgrounds, and chart axis lines all need to hit 3:1 against their adjacent surface. Skipping this step is the most common audit failure on otherwise accessible sites.

A note on "large text": the threshold is in points, not pixels. 18pt at 96 DPI is roughly 24px. 14pt bold is roughly 18.7px and bold. If you build in pixels (most web teams do), check the size mapping for your stack before claiming the 3:1 exemption. CSS font-size: 18px is not large enough; you need 24px or 19px-bold to qualify.

When AA is enough

For most product UIs (SaaS dashboards, mobile apps, internal tools, marketing sites), AA is the right target. Three reasons.

First, AA is what almost every published accessibility law actually requires. The Americans with Disabilities Act (in practice), Section 508 in the US federal sector, AODA in Ontario, the EAA in Europe, all reference WCAG conformance, and the conformance level they require is AA. Hitting AAA is a stretch goal, not a compliance baseline.

Second, AAA is hard to maintain at scale. A 7:1 ratio collapses your palette options. Most brand colors at their natural saturation can't produce a usable mid-step that hits 7:1 against both light and dark backgrounds. To enforce AAA across a design system, you either desaturate every accent color or restrict the colors-on-colors pairings you allow. That limits the working palette your designers actually have on hand, which limits the visual range of the product.

Third, AA is enough for the readability outcomes most users need. The 4.5:1 ratio for normal text was set based on testing with people who have low vision, which is the design constraint that drives the contrast spec. Going to 7:1 is not "more accessible by 50 percent." It hits a ceiling for an edge case that fewer users have, while costing the rest of your design.

If your team is choosing between strict AA and strict AAA, default to AA. Apply that consistently. Push specific pairings to AAA where they matter: body text on the most-viewed pages, focus indicators that need to stand out on busy backgrounds, error messaging that has to read fast.

When AAA matters

There are three contexts where AAA is the right call.

Regulated industries. Government services in the US (Section 508, certain agency policies), public-sector projects in the EU under the Web Accessibility Directive, and healthcare patient portals subject to specific state regulations often spec AAA in the contract. If your client signs you to "WCAG 2.2 AAA conformance," the obligation is in writing. AAA is a hard constraint, not a target.

Accessibility-first products. If your product's core users include people with low vision (a screen reader companion app, a magnifier, a high-contrast browser extension), AAA stops being a stretch goal and becomes the baseline your audience actually uses. Design backwards from the user, not from the spec.

Reading-heavy long-form interfaces. Documentation sites, ebook readers, news platforms, anything where users are reading body text for 20 minutes at a stretch. Higher contrast reduces fatigue. AAA is reasonable here even when not legally required.

For everything else (most B2B SaaS, e-commerce, social, productivity tools), AA hits the goal at lower design cost. Pick one, document the choice in your design system, and stop debating the question every sprint. If your design system has to hold AAA across many pairings, generate 50 to 950 shade scales at the right L values to keep saturation intact.

The legal landscape (EAA, WCAG 2.2, ISO 40500)

Three legal developments are worth knowing in 2026.

The European Accessibility Act (EAA) became enforceable on June 28, 2025. Any company selling products or services into the EU (including software, e-commerce, banking, e-readers, transport ticketing) has to meet WCAG 2.1 AA equivalence on the customer-facing surfaces. The enforcement teeth vary by member state, but all 27 are now empowered to fine non-compliant operators. There is no "we are a US company" exemption if you ship to EU users.

WCAG 2.2 became ISO/IEC 40500:2025 in May 2025, formally putting it on the international standards track. ISO ratification matters because it lets governments and procurement frameworks reference WCAG by ISO number rather than W3C URL, which simplifies enterprise procurement contracts. Expect more RFPs to call out 40500 conformance starting in 2026.

Section 508 in the US still references WCAG 2.0 AA in its current refresh, but the General Services Administration has signaled an update toward WCAG 2.2 AA. Federal contractors should plan for the migration. The threshold is moving in one direction across every major framework, which is up.

What this adds up to: contrast compliance is moving from a UX nice-to-have to a procurement and legal checkbox, with measurable financial exposure if you skip it. AA is the floor. For high-traffic enterprise B2B and any public-sector work, the planning baseline is moving toward AAA on critical text and AA everywhere else.

How to test contrast

The fastest path: paste any two colors into a WCAG contrast checker, get the ratio, see which AA and AAA thresholds it passes. Free tools handle individual pair lookup. The work that takes longer is testing every pair that matters across a system: text on background at every step, focus rings on every surface, error states, hover states, disabled states.

For multi-pair audits across a full system, upgrade to Paletta Pro to surface every failing combination at once, with a Tailwind export that drops directly into your config. For one-off pair lookups, Paletta's contrast checker handles WCAG 2.x ratio and the newer APCA score side by side, with no signup.

A few things to test that single-pair tools miss:

• Hover and focus states. A button might pass at rest, fail on hover. Test both states.
• Disabled text. Most "muted" text colors fail AA. Either accept that disabled text doesn't have to hit AA (per WCAG), or use a stronger muted color.
• Form input borders. 3:1 against the surrounding card background, not against the page background.
• Icons that carry meaning. A red error icon on a white card needs 3:1, even if the error message text passes 4.5:1.
• Charts and data visualization. Adjacent series colors need 3:1 against each other (so users can tell them apart), and labels need 4.5:1 against the chart's background.
• Color-only encoding. WCAG 1.4.1 forbids using color alone to convey meaning. Status indicators, error states, and chart series need a non-color signal too. The color blindness simulator shows where this rule gets violated; the designing for color blindness guide covers the patterns that fix it.

Common mistakes

Trusting visual review. Two designers can look at the same button and disagree on whether it "feels" accessible. The math is the only reliable signal. Always check color contrast ratios, never eyeball.

Designing in HSL. HSL "lightness 50%" yellow is much lighter than "lightness 50%" navy, which means a single brand-color shade scale built in HSL produces wildly inconsistent contrast across hues. Build the scale in OKLCH so that L 0.55 yellow and L 0.55 navy have the same luminance. Saves a lot of contrast remediation downstream.

Treating brand color as untouchable. A primary brand color rarely lands at the right L for body text. Most UIs use the 600 or 700 step of the brand color's shade scale, not the brand color itself, for any text use. Reserve the literal brand color for hero areas and large display copy.

Forgetting dark mode. A pair that passes AA on white might fail on near-black, and vice versa. Run the same audit on the dark surface set. Don't invert; build dark mode separately.

Optimizing the wrong page. A site's settings page is rarely the issue. Body text on the highest-traffic pages, the checkout flow, the search results page, those are where contrast failures cost the business. Audit those first.

FAQ

Is AA legally required? Effectively yes for any consumer-facing service in most developed markets. EAA, ADA case law, AODA, and Section 508 all converge on WCAG AA equivalence. AAA is rarely required by law but is sometimes required by contract.

Does APCA replace WCAG contrast ratios? Not yet. APCA is a perceptually uniform contrast model that handles edge cases (light text on light backgrounds, very dark text on very dark backgrounds) better than the WCAG 2.x formula. WCAG 3.0 may adopt it, but WCAG 3.0 is not finalized and is not the legal reference. For now, treat APCA as a supplementary signal; the WCAG 2.x ratio is the compliance baseline.

What's the difference between contrast and luminance? Luminance is a property of one color. Contrast ratio is a relationship between two colors' luminance values. The WCAG formula is (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color's relative luminance and L2 is the darker.

Do icons need to hit 4.5:1 or 3:1? 3:1 if the icon is a UI element (button affordance, status indicator). 4.5:1 if the icon is conveying information that's not also expressed in adjacent text. When in doubt, 4.5:1.

What about gradients? Test against the lightest point and the darkest point of the gradient where text overlays it. If the text fails at any visible point, the gradient fails. Most gradients are bad for text contrast; reserve them for non-text decorative use.