Color Contrast Requirements: WCAG 2.0, 2.1, 2.2 and the ADA

Originally published at AccessGuard.

Someone has asked you what contrast ratio the law requires. Maybe a client who got a letter about the ADA, a designer defending a pale gray, or a manager who read that "WCAG 2.2 changed everything". The short answer is the same in almost every case: 4.5:1 for normal text and 3:1 for large text, plus 3:1 for the parts of buttons, inputs and icons people need to see. That has been the Level AA rule since WCAG 2.0, and no later version or US law has changed the numbers.

If you only need to check a pair of colors, the free color contrast checker gives you the ratio and the AA verdict in a few seconds. The rest of this guide explains where each number comes from, which version and which law points at which level, and what to say when someone asks whether a ratio makes a site "ADA compliant".

The ratios at a glance

Every number below comes from the WCAG 2.2 Recommendation and its Understanding documents at the W3C, linked in each row.

WhatLevel AALevel AAACriterion

Normal text and images of text4.5:17:11.4.3 (AA), 1.4.6 (AAA)
Large text (18pt, or 14pt bold)3:14.5:11.4.3 (AA), 1.4.6 (AAA)
Parts of user interface components and graphics needed to understand them3:1No higher level1.4.11 (AA)
Focus indicator, focused against unfocused stateNot required3:12.4.13 (AAA)

Three details catch people out:

• No rounding. The W3C says computed values "should not be rounded", and gives the example that 4.499:1 does not meet 4.5:1 (Understanding 1.4.3). A checker that shows 4.5 for a pair that is really 4.47 is hiding a failure.
• Large text is measured in points. The same document puts 1pt at 1.333 CSS pixels, so 18pt is about 24px and 14pt is about 18.5px. Bold at 18.5px counts as large; regular weight at 18.5px does not.
• Some text has no requirement. Text in an inactive control, pure decoration, text nobody can see, text inside a photo with other significant content, and logos and brand names are all exempt under 1.4.3.

WCAG 2.0, 2.1 and 2.2: what changed for contrast

Most searches about contrast name a version, as if each one set a new number. They did not. Here is what each version did.

WCAG 2.0 (2008)

WCAG 2.0 introduced both text criteria: 1.4.3 Contrast (Minimum) at AA with 4.5:1 and 3:1, and 1.4.6 Contrast (Enhanced) at AAA with 7:1 and 4.5:1. It said nothing about the contrast of borders, icons or focus outlines, so a pale gray input border passed 2.0 as long as its label text was dark enough.

WCAG 2.1 (2018)

WCAG 2.1 kept 1.4.3 and 1.4.6 as they were and added 1.4.11 Non-text Contrast at Level AA, one of 17 new criteria (W3C, What's new in WCAG 2.1). It asks for 3:1 against adjacent colors for:

• the visual information needed to identify a control and its state, such as an input's border, a checkbox's box or the fill of a toggle, unless the control is inactive or its look comes from the browser unchanged;
• the parts of a graphic needed to understand it, such as the lines in a chart or an icon that carries meaning.

This is the change that matters most in practice. A site that met 2.0 can fail 2.1 without a single text color changing, because of light form borders and pale icons.

WCAG 2.2 (2023)

WCAG 2.2 changed none of the ratios. The W3C says the 2.0 and 2.1 criteria "are essentially the same in 2.2, with one exception: 4.1.1 Parsing is obsolete and removed" (What's new in WCAG 2.2). Of the nine new criteria, one involves a ratio: 2.4.13 Focus Appearance, which asks for a focus indicator at least as large as a 2 CSS pixel perimeter of the component, with 3:1 between the same pixels focused and unfocused. It is Level AAA, so it is not part of an AA target.

So if you test against WCAG 2.2 AA, you are testing the same contrast rules as 2.1 AA. If you test against 2.0 AA, you are missing 1.4.11.

Why 4.5:1 and not some other number

Clients sometimes treat the number as arbitrary. The W3C explains it in Understanding 1.4.3: 3:1 is the minimum that the ISO 9241-3 and ANSI/HFES 100-1988 standards recommend for standard text and vision, and the ratio is raised to 4.5:1 to make up for the contrast lost by someone with moderately low visual acuity, about 20/40. That is a useful line for a client meeting: the rule is sized for a common level of vision loss, not for rare cases.

What the ADA and other laws actually require

No US law sets a contrast ratio of its own. Each one points at WCAG, and the version and level it points at decide which rows of the table apply.

RuleWho it coversStandard it points to

ADA Title II web ruleUS state and local governments, including public schools and collegesWCAG 2.1 AA (89 FR 31320)
ADA Title IIIBusinesses open to the publicNo technical standard in the regulations; the Justice Department calls WCAG "helpful guidance" (ADA.gov, 2022)
Section 508US federal agencies and what they buyWCAG 2.0 AA (Access Board, E205.4)
European Accessibility ActMany products and services sold in the EUEN 301 549; version 4.1.1, published in September 2026, points to WCAG 2.2 AA (AccessibleEU)

A few practical readings of that table:

• Title II sites need 1.4.11. Because the rule adopts 2.1 AA, a city or college site has to meet the 3:1 non-text rule as well as the text ratios. The compliance dates moved to April 2027 and April 2028 in an interim rule this year; our guide to the Title II deadline extension has the details, and the ADA Title II web rule page has the summary.
• Title III has no number in law. When someone says "the ADA requires 4.5:1", what is true is that WCAG AA requires it and WCAG AA is the benchmark most businesses use. The Justice Department's own guidance names "poor color contrast" as an example of a barrier, which is a good reason to treat it as a priority. See ADA website compliance for how Title III works.
• Section 508 still cites 2.0. A federal client's formal requirement does not include 1.4.11, but testing against 2.1 or 2.2 AA covers everything 2.0 asks for and more.
• Nobody's law requires AAA. None of these rules points at Level AAA, and the W3C itself does not recommend requiring AAA as a general policy for entire sites, because some content cannot meet it (Understanding Conformance). 7:1 is a good choice for body text when the brand allows it, not an obligation.

What to tell a client or a manager

Clients usually want one sentence. Something like this is accurate:

"WCAG Level AA, which the ADA rules and guidance point to, asks for 4.5:1 on body text, 3:1 on large headings and 3:1 on borders and icons people need to see. Our current gray fails that, and darkening it fixes it without changing the look of the brand."

What not to say: that meeting the ratios makes a site compliant. Contrast covers two of the 55 Level A and AA success criteria in WCAG 2.2 (our WCAG 2.2 checklist lists them all), and passing one says nothing about the others. The same goes for any scan, ours included: an automated check measures text on solid backgrounds reliably, but text over photos and gradients needs a person to judge.

How to check a site against these numbers

For a single pair of colors, a calculator is enough. For a site, the failures are usually in places nobody picked colors on purpose: placeholder text, disabled-looking buttons that are still active, light borders on inputs and icon-only links.

/* Broken: #999 on white is 2.85:1, fails 4.5:1 for body text */
.form-hint {
  color: #999999;
}

/* Fixed: #767676 on white is 4.54:1, passes AA for normal text */
.form-hint {
  color: #767676;
}

/* Broken: #ddd input border on white is 1.36:1, fails 1.4.11 */
input {
  border: 1px solid #dddddd;
}

/* Fixed: #8a8a8a on white is 3.45:1, passes 3:1 for non-text contrast */
input {
  border: 1px solid #8a8a8a;
}

Run the ratios in your own checker before you ship them; brand colors rarely land on these exact grays. When a brand color fails, our guide to WCAG color contrast ratios walks through darkening it step by step, testing text over images, and handling a client who will not change the palette.

To find every failing pair on a page at once, run a free audit. AccessGuard runs automated WCAG 2.2 AA checks in a real browser, so it measures the colors the page actually renders, including ones set by a theme or a plugin, and lists each failing element with its ratio.

Checklist

• Decide the target first: WCAG 2.1 AA for a Title II client, 2.2 AA for anyone selling into the EU, and 2.2 AA as a sensible default for everyone else, since it covers the older versions' contrast rules.
• Check body text at 4.5:1 and large text (24px, or about 18.5px bold) at 3:1. Do not round.
• Check input borders, checkboxes, toggles, meaningful icons and chart lines at 3:1 against what is next to them.
• Check hover, focus and error states, not only the default state.
• Have a person look at text over images and gradients.
• Write the target version and level into the brief or the contract, so "compliant" never becomes the promise.

Start with the color contrast checker for the brand palette, then scan the pages that matter to see where those colors end up.