Skip to content
wcagc
←Back to blog
WCAGcontraststandards

WCAG color contrast requirements, explained

What WCAG requires for color contrast: 4.5:1 for text, 3:1 for large text and UI, plus how to measure and fix it. A plain-language guide.

P

Pavel Charkasau

WCAG sets two color contrast numbers you have to hit at Level AA. Normal text needs a contrast ratio of at least 4.5:1 against its background, and large text needs at least 3:1 (W3C, Understanding SC 1.4.3). A separate criterion, 1.4.11 Non-text Contrast, asks for 3:1 on the parts of the interface that aren't text: button borders, form field outlines, icons, and chart segments you need to read the content (W3C, Understanding SC 1.4.11). Contrast is measured as a ratio from 1:1 (no contrast) up to 21:1 (black on white), based on the relative luminance of the two colors. This guide covers where each number applies, what counts as "large" text, what's exempt, which level the law actually names, and how to check a real page. Contrast is one of the few WCAG failures a machine can measure reliably, which is exactly why there's no excuse for shipping it.

What does WCAG require for color contrast?

There are two AA criteria and one AAA criterion, and people mix them up constantly. Here is the whole picture in one table (W3C, Understanding SC 1.4.3; W3C, WCAG 2.2):

CriterionLevelApplies toMinimum ratio
1.4.3 Contrast (Minimum)AANormal text4.5:1
1.4.3 Contrast (Minimum)AALarge text3:1
1.4.11 Non-text ContrastAAUI components, meaningful graphics3:1
1.4.6 Contrast (Enhanced)AAANormal text7:1
1.4.6 Contrast (Enhanced)AAALarge text4.5:1

For almost every project the target is AA, so the two numbers you memorize are 4.5:1 for body text and 3:1 for large text and interface elements. The AAA numbers (7:1 and 4.5:1) exist for cases that need extra headroom, but the W3C doesn't expect a whole site to hit AAA, because a 7:1 ratio rules out a lot of legitimate brand palettes (W3C, Understanding Conformance).

What counts as large text?

Large text is text at 18 point or bigger, or 14 point bold or bigger. In CSS pixels that works out to roughly 24px, or about 18.5px when the text is bold (W3C, Understanding SC 1.4.3). The reasoning is simple: bigger letters have thicker strokes, so the eye can separate them from the background at a lower ratio. That's why a big heading passes at 3:1 while the same color on body text would fail.

Two things trip people up. Point size and pixel size aren't the same unit, so if you design in px, convert before you decide something is "large": 16px body text is not large, and neither is 18px regular weight. And bold matters — 14pt bold qualifies, but 14pt regular does not. When you're unsure, treat the text as normal and hold it to 4.5:1. The stricter number is never wrong.

What is the 3:1 rule for non-text contrast?

SC 1.4.11 Non-text Contrast is the criterion most sites forget, partly because it was only added in WCAG 2.1 (W3C, What's New in WCAG 2.1). It says the visual information you need to identify a control, or to understand a graphic, must reach 3:1 against whatever sits next to it (W3C, Understanding SC 1.4.11).

In practice this covers the parts of a page that carry meaning without any words:

  • The border of a text input, so a user can find the field on the page.
  • The visual state that shows a checkbox is checked, or a toggle is on.
  • Icon-only buttons, where the glyph is the only cue to what the button does.
  • The slices of a pie chart or the lines of a graph, when the data is the point.

The classic failure is a form built with a very light gray field border on a white background. It might measure 1.4:1, which looks clean in a mockup and disappears for a user with low vision. The fix is usually one token change, not a redesign. Focus indicators sit under a different criterion (2.4.7 Focus Visible), but the same 3:1 logic is a good floor for them too.

How is a contrast ratio calculated?

A contrast ratio compares the relative luminance of two colors using the formula (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 is the darker one's (W3C, WCAG 2.2 definitions). Relative luminance runs from 0 for black to 1 for white, computed from the red, green, and blue channels with green weighted most heavily, because human eyes are most sensitive to green.

The result lands somewhere between 1:1 and 21:1. Identical colors give 1:1. Pure black text on pure white gives the maximum, 21:1. You don't need to run the math by hand, since every contrast tool does it. But two facts are worth keeping in your head. Luminance is not the same as how "bright" a color feels, so eyeballing a palette is unreliable. And the ratio ignores hue: a red and a green that clash badly for a color-blind reader can still pass 4.5:1, which is why contrast is necessary but not sufficient on its own.

What is exempt from color contrast requirements?

SC 1.4.3 lists specific exceptions, and they're narrower than people hope (W3C, Understanding SC 1.4.3):

  • Incidental text — text that is decorative, not visible, inactive (like a disabled button), or part of a picture that carries other significant visual content.
  • Logotypes — text that is part of a logo or brand name has no contrast requirement.

That's the full list for text. Note what isn't on it: your placeholder text, your "subtle" helper copy under a form field, your light-gray timestamps. Designers often assume secondary text gets a pass because it's less important. It doesn't. If it's real, active text a user is meant to read, it needs 4.5:1. A disabled control is exempt, but the moment it's enabled the exemption is gone. For non-text contrast, 1.4.11 similarly exempts inactive components and logos.

Which contrast level does the law require?

Level AA, essentially everywhere. WCAG is a technical standard, and the laws that reference it point at AA:

  • In the EU, the harmonised standard EN 301 549 adopts WCAG Level AA for web content, and the European Accessibility Act leans on that standard.
  • The US Department of Justice's ADA Title II rule names WCAG 2.1 Level AA (ADA.gov). See ADA for how that fits the wider act.
  • Section 508 incorporates WCAG 2.0 Level AA for US federal agencies.

So the contrast numbers your obligation cares about are the AA ones: 4.5:1, 3:1 for large text, 3:1 for non-text. AAA contrast is a good idea on a high-stakes public service, but I've never seen a mainstream law require 7:1 across a whole site, and given the palette constraints I'd be surprised if one did. When a contract says "WCAG conformant" with no level, read it as AA and confirm in writing.

How do you check and fix color contrast?

Start with a measurement, not a guess. Drop your foreground and background hex values into a contrast checker and read the ratio directly; it will tell you whether the pair clears 4.5:1 and 3:1. For a whole page, an automated scan flags every text run and control that falls short, with the exact selector, so you can fix it in the stylesheet instead of hunting by eye.

Here's the honest part, and it's the reason contrast belongs at the top of your list. A scanner measures solid-color contrast reliably — it's arithmetic on two known values, so this is one of the criteria automation genuinely nails. Where it gets shaky is text sitting on a photo or a gradient, where the "background" changes pixel by pixel, and states a crawler doesn't trigger, like a hover color or an error message. Those still want a human eye. But a machine catches the most common failures every time: gray text on white, a faint button border. In practice contrast is still the single most common issue I see on live sites, and that's a design-review gap, not a tooling gap. Set the ratios as design tokens once and the whole problem mostly goes away.

Frequently asked questions

What is the minimum contrast ratio for WCAG AA?

4.5:1 for normal text and 3:1 for large text, under SC 1.4.3 Contrast (Minimum) (W3C, Understanding SC 1.4.3). User interface components and meaningful graphics need 3:1 under SC 1.4.11 Non-text Contrast.

What is considered large text for contrast?

Text at 18 point or larger, or 14 point bold or larger — roughly 24px, or about 18.5px when bold (W3C, Understanding SC 1.4.3). Large text only has to meet 3:1 instead of 4.5:1.

Does color contrast apply to buttons and icons?

Yes. SC 1.4.11 Non-text Contrast requires 3:1 for the visual parts of a control that identify it, such as a field border, an icon-only button, or the checked state of a checkbox, and for graphics you need to understand the content (W3C, Understanding SC 1.4.11).

Is a logo exempt from contrast requirements?

Yes. Text that is part of a logo or brand name has no contrast requirement under SC 1.4.3 (W3C, Understanding SC 1.4.3). Disabled or purely decorative text is also exempt, but active text a user is meant to read is not.

What is the difference between AA and AAA contrast?

AA asks for 4.5:1 on normal text and 3:1 on large text (SC 1.4.3). AAA raises those to 7:1 and 4.5:1 (SC 1.4.6) (W3C, WCAG 2.2). The W3C doesn't recommend requiring AAA across an entire site, so most projects target AA.

Check your contrast on a real page

Contrast is the failure automation catches best, so there's no reason to ship it. Run a free scan to get every low-contrast text run and control on your site with the exact selector, then adjust the colors in your tokens. Use the WCAG checklist to confirm you've covered 1.4.3 and 1.4.11 together. A scanner clears the mechanical contrast problems fast; the judgment calls, like text over imagery and hover or error states, still need a human to confirm.

Written by Pavel Charkasau, founder of wcagc.com. Last updated 13 August 2026.

Sources