WCAG Contrast Ratios: What AA and AAA Actually Require

If you’ve ever been told a design “fails contrast,” you probably have questions. What exactly is a contrast ratio? Why is 4.5:1 the magic number? What’s the difference between AA and AAA? This guide breaks down the actual requirements so you can make informed decisions instead of guessing.

What a Contrast Ratio Actually Measures

A contrast ratio is a numerical comparison between the relative luminance of two colors, typically a foreground (text) color and a background color. Luminance is a measure of how bright a color appears to the human eye, weighted toward green (which our eyes are most sensitive to) and away from blue (which they’re least sensitive to).

The ratio is expressed as something like 4.5:1. The first number is always the lighter color’s luminance plus 0.05, divided by the darker color’s luminance plus 0.05. The scale runs from 1:1 (no contrast at all, like white on white) to 21:1 (maximum contrast, pure black on pure white).

The 0.05 offset prevents division by zero and accounts for ambient light. You don’t need to calculate this by hand (tools handle it), but understanding what the number represents helps you reason about it.

The AA and AAA Requirements

WCAG (Web Content Accessibility Guidelines) defines two conformance levels for contrast: AA and AAA. These aren’t just suggestions. For many organizations, AA compliance is a legal requirement under laws like the ADA, Section 508, or the European Accessibility Act.

Level AA: The Baseline

Level AA requires:

• 4.5:1 for normal text (anything under 18pt, or under 14pt if bold)
• 3:1 for large text (18pt and above, or 14pt bold and above)
• 3:1 for UI components and graphical objects (like form borders, icons, and focus indicators)

In CSS terms, 18pt is roughly 24px, and 14pt bold is roughly 18.66px bold. The exact conversion depends on the font, but those are the commonly used equivalents.

Level AAA: The Higher Standard

Level AAA requires:

• 7:1 for normal text
• 4.5:1 for large text

Notice the pattern: AAA’s normal text requirement is the same as AA’s large text requirement, just shifted up. AAA is significantly harder to achieve, and WCAG itself acknowledges it’s not always possible to meet AAA for all content. It’s a target, not an absolute mandate for most projects.

Real Color Examples: What Passes and What Fails

Let’s look at concrete examples. These use hex values you’d actually encounter in a design system.

Passing AA (Normal Text: 4.5:1 Required)

Failing AA (Normal Text)

That #767676 vs. #777777 gap is instructive. A single step in hex values crosses the threshold. The difference is invisible to most sighted people, but the line has to be drawn somewhere. These ratios represent the point where readability degrades measurably for people with moderate low vision (roughly 20/40 acuity, which is common and often doesn’t require corrective lenses by the user’s choice).

A Worked Calculation

Let’s say you want to check if #757575 on #FFFFFF passes AA. The relative luminance of #757575 is approximately 0.171, and #FFFFFF is 1.0. The contrast ratio is:

(1.0 + 0.05) / (0.171 + 0.05) = 1.05 / 0.221 = 4.75:1

That passes AA (4.5:1) but fails AAA (7:1) for normal text. It passes both AA and AAA for large text (3:1 and 4.5:1 respectively).

Common Mistakes Designers Make

Mistake 1: Treating Placeholder Text as Exempt

Placeholder text inside form inputs needs to meet contrast requirements too. The popular pattern of using light gray (#AAAAAA) placeholder text on a white background gives you roughly 2.32:1, a clear failure. If the placeholder conveys information the user needs, it must be readable. A better approach is to use a visible label above the field and keep placeholder text supplementary.

Mistake 2: Ignoring the Background

Contrast is always relative. A dark blue (#003366) that works beautifully on white (11.58:1) might fail completely on a dark navy background (#1A1A2E), where the ratio could drop below 2:1. Every time the background changes (hover states, dark mode, alternating table rows) the contrast needs to be rechecked.

Mistake 3: Relying on Color Alone

Contrast ratios only measure luminance difference. They don’t account for color-only information. If you use red text to indicate an error, someone with red-green color blindness might not see any difference at all, even if the contrast ratio technically passes. Always pair color with another indicator: an icon, bold text, an underline, or a text label.

Mistake 4: Checking Only the Primary Brand Colors

Most contrast failures happen at the edges of a design system: secondary buttons, disabled states, captions, footer links, toast notifications. The hero banner with #FFFFFF on #000000 is easy. The trouble spots are the subtle grays, the colored-background sections, and the interactive states.

Mistake 5: Assuming Dark Mode Is Automatically Accessible

Inverting a light theme doesn’t produce an accessible dark theme. White text (#FFFFFF) on pure black (#000000) is 21:1, technically maximum contrast, but it can cause visual discomfort. There’s a halation effect where bright text appears to bleed into the dark background, particularly for people with astigmatism (roughly 30-50% of the population). Many dark mode guidelines recommend off-white text (#E0E0E0 or similar) on a dark gray background (#121212), which still achieves strong contrast ratios around 15:1 while reducing eye strain.

Mistake 6: Forgetting About Text Over Images

Text overlaid on photographs is one of the hardest contrast challenges. The background isn’t a single color; it varies across the image. A semi-transparent overlay between the image and text is the standard solution, but the overlay needs to be dark or light enough that the text achieves sufficient contrast against it, not against the image underneath.

What About Non-Text Elements?

WCAG 2.1 added requirement 1.4.11 (“Non-text Contrast”), which requires a 3:1 ratio for UI components and graphical objects. This covers:

• Form input borders
• Buttons (the button boundary, not just the text)
• Icons that convey meaning
• Focus indicators
• Chart elements like bars and lines
• Custom checkboxes and radio buttons

This is the requirement most teams discover last, because automated testing tools often miss it. A light gray border (#CCCCCC) around an input field on a white background gives you only 1.61:1, well below the 3:1 requirement.

Practical Advice

If you’re building a design system from scratch, start with contrast. Pick the lightest gray you’ll use on white for small text (somewhere around #595959 to #767676 depending on your AA or AAA target), then work your palette around those anchors.

If you’re auditing an existing design, prioritize by impact. Body text and primary navigation failing AA is critical. A decorative element sitting at 2.9:1 instead of 3:1 is worth fixing eventually, but it won’t prevent someone from using your product.

And run the numbers. Don’t eyeball it. Human perception of contrast is contextual and unreliable. A color pair that looks fine on your calibrated monitor in a dim room might be unreadable on a phone screen in sunlight.

Try the Contrast Checker to test your own color combinations against AA and AAA requirements instantly.