WCAG AA vs AAA Contrast: Which Should Designers Actually Target?

Every contrast checker tells you whether a pair passes AA or AAA — but almost no one explains which target you should be designing toward. Here's the practical answer for working designers.

Run any color pair through a WCAG contrast tool and you get back four labels: AA Normal, AA Large, AAA Normal, AAA Large. Almost every accessibility tutorial explains what these are. Almost none explain which one you should actually design to. This post fills that gap — with the practical answer working designers need.

What the Levels Actually Mean

WCAG (Web Content Accessibility Guidelines) defines two compliance levels for text contrast. Level AA requires a contrast ratio of 4.5:1 for normal-size text and 3:1 for large text (18pt+ regular, or 14pt+ bold). Level AAA requires 7:1 for normal text and 4.5:1 for large text. AAA is roughly 1.5× stricter than AA. The numbers come from research on text readability for people with moderate visual impairments (AA) and severe visual impairments (AAA). Higher is always better for readability; the question is what's worth designing toward.

The Practical Recommendation

For most product and marketing work, target AA as the floor and AAA where you can get it cheaply. AA is the legal requirement in most jurisdictions (EU Accessibility Act, ADA in the US for public-facing sites, AODA in Ontario) and the realistic baseline that doesn't force you into a black-and-white-only palette. AAA is genuinely better but typically requires sacrificing brand color decisions you care about — a deep navy and a soft cream might pass AA at 5.2:1 but fail AAA at 6.1:1, and "lighten the cream until it passes AAA" might break the brand. Target AAA for body copy and headlines when your palette allows it, and accept AA for stylized elements, badges, and decorative typography.

Where AAA Genuinely Matters

Three cases justify designing to AAA: (1) long-form reading interfaces (news sites, blog reading mode, document viewers) where users will spend 5+ minutes with text — fatigue compounds at lower contrast. (2) Forms and critical UI text (error messages, payment confirmations, security warnings) — failure costs are high when users misread. (3) Products explicitly serving older audiences or accessibility-first markets — your audience genuinely needs the higher floor. Outside these cases, AAA is a quality bonus, not a requirement.

Make the Check a Standard Step

Most contrast failures aren't deliberate — they're brand palette pairs nobody checked. The fix is to make the check a standard step in your design process. The WCAG Contrast Checker shows AA and AAA pass/fail for any pair in one view. Run every text/background combination in your palette through it before locking the design system. The Palette Health tool goes a step further and flags every problematic pair in a five-color palette in one screen — useful when you've extracted a palette from an image and need a fast read on whether it's actually usable for product design.

Beyond Text: Contrast for Icons, Charts, and Status Indicators

WCAG's text contrast rules get most of the attention, but the same principles apply to non-text elements that carry meaning. WCAG 2.1 added a separate guideline (1.4.11 Non-text Contrast) requiring 3:1 contrast for UI components and graphical objects that communicate information. This covers icons that aren't accompanied by labels (a warning triangle, a delete X), data visualization elements (chart lines, bar colors), and status indicators (a green dot vs a red dot for "online" vs "offline"). The 3:1 threshold is the same as AA Large text — easier to meet than body text contrast, but still a real bar. Run your icon colors and chart palette colors through the contrast checker against their backgrounds. The single most common failure: a pale grey icon on a white background that's "decorative" in the designer's mind but functionally a control the user has to find and tap. Anything carrying meaning needs to hit the 3:1 floor.

Building a Palette That Passes by Default

The most efficient way to handle WCAG compliance isn't post-hoc validation — it's building a palette that passes by default. Three rules get you most of the way. (1) Every brand palette needs at least one near-black neutral (around 15% lightness or darker) and at least one near-white neutral (around 92% lightness or lighter) — these two anchor your text-on-background combinations and almost always pass AAA together. (2) Your saturated brand colors should sit in the middle of the lightness range so they're not load-bearing for body text contrast — use them for accents and large display text where AA Large (3:1) applies. (3) For body text, use the near-black against your background neutrals; for headlines, use either the near-black or a deeper variant of your primary brand color. Use the Palette Maker to generate the deeper variant from your primary, and run the resulting palette through Palette Health to confirm every meaningful pair passes before locking the system.

Extract a palette in seconds — no signup

Upload any image and ColorSense pulls 5 vibrant brand-ready colors with HEX, RGB, and HSL codes. Free, unlimited, no account required.

Open ColorSense →