WCAG contrast ratios: AA vs AAA for text and UI

Published: 2026-09-05

How WCAG 2.x contrast ratios work, when AA vs AAA applies for normal and large text, the 3:1 UI rule, and how to check pairs locally.

Contrast ratio is how much lighter one color is than another after converting both to relative luminance (how bright they look in sRGB). WCAG 2.x uses that single number to decide whether text and UI graphics are readable enough. AA is the common product bar; AAA is stricter and usually reserved for body copy you want especially readable—not every chrome label.

The formula in one line

For two relative luminances (L_1) and (L_2) (each between 0 and 1):

contrast = (lighter + 0.05) / (darker + 0.05)

Results are written like 4.5:1 or 7:1. Black on white is about 21:1; identical colors are 1:1. The + 0.05 term softens extremes so very dark pairs still get a finite ratio.

Relative luminance is not “average RGB.” Green contributes more than red or blue (WCAG’s sRGB weights). That is why two greys with the same hex “middle” can feel different from a saturated brand color at a similar channel average—always measure the pair, do not guess from the picker.

AA vs AAA thresholds (text)

Criterion Normal text Large text
AA (SC 1.4.3) ≥ 4.5:1 ≥ 3:1
AAA (SC 1.4.6) ≥ 7:1 ≥ 4.5:1

Normal text is everyday body copy and most UI labels at typical sizes. Large text (WCAG’s definition) is at least 18pt (~24px) regular or 14pt bold (~18.5px). Below that, use the normal-text column even if the design “looks big.”

Practical takeaways:

  • Hitting 4.5:1 unlocks AA for normal text and AAA for large text—the same floor appears twice in the table.
  • AAA normal (7:1) is hard with light grey on white or soft brand accents on pastel backgrounds. Many sites aim AAA for long-form reading and accept AA for secondary chrome.
  • Passing AAA for large text does not mean normal text passes AA. Check the size you actually ship.

UI components and graphics (3:1)

WCAG 2.2 SC 1.4.11 Non-text Contrast asks for about 3:1 between a control or graphic and the adjacent colors that define it—icons, input borders, focus rings, chart lines—not the fill of every decorative blob. That matches the AA — UI row in LocalTools’ checker.

Text inside a button still needs text contrast against the button fill (usually 4.5:1 for AA). The 3:1 rule is about seeing the control, not replacing text requirements.

What contrast does not cover

  • Font weight, letter-spacing, and blurry rendering still affect real readability; a passing pair can fail users if type is hairline or anti-aliased into the background.
  • Color blindness is separate: red/green status alone can fail even when both states meet 4.5:1 against white. Use shape, text, or icons too.
  • Opacity and stacking. Semi-transparent text is measured after compositing onto the background. Check the rendered pair, not the raw token with alpha ignored.
  • Dark mode. Each theme is its own pair set. Light-theme AA does not transfer; re-check inverted surfaces.

For picking HEX vs HSL vs OKLCH when you author tokens, see HEX, RGB, HSL, and OKLCH. Contrast is a property of the final sRGB pair on screen, whatever notation you stored.

A sensible review workflow

  1. Lock foreground + background for body, headings, muted labels, links, and error text.
  2. Note whether each role is normal or large under WCAG’s pt/px rules.
  3. For inputs and icons, check 3:1 against the surrounding surface (and focus indicators against both).
  4. Prefer AA as the merge gate; treat AAA as a stretch for long reading surfaces.
  5. Re-check after design-tool export—shared “grey 400 on white” often sits just under 4.5:1.

Brand palettes are not usually secret, but pasting production tokens into a random online checker still sends them to someone else’s server. A client-side checker keeps the math in your tab (Why “local only” matters for developer tools).

Try it on LocalTools

Open the WCAG Contrast Checker:

  1. Set foreground (text) and background with HEX or the pickers (rgb() / hsl() also work).
  2. Read the ratio plus pass/fail for AA/AAA normal and large text, and AA for UI components.
  3. Use Swap colors, sample pairs (including an AA-edge grey), and Copy summary for design reviews.

All contrast math runs as JavaScript in your browser; colors are not uploaded. For fluid type sizes next to those checks, see the CSS Unit Converter & Fluid Type. To convert a token into HEX/RGB before pasting, use the Color converter.

Related reading

← All learn articles