Skip to main content
WCAGrules
Quick navigation

Contrast (Enhanced)

Body text needs a contrast ratio of at least 7:1, and large text at least 4.5:1, up from 4.5:1 and 3:1 at Level AA. Large text means 18 point, or 14 point bold, which is roughly 24 and 18.5 CSS pixels for roman type, with Chinese, Japanese and Korean taking whatever size comes out equivalent. The exceptions are the same two as at AA. Logos and brand names are one. The other is incidental text, which covers pure decoration, text nobody can see, text inside a control that is currently switched off, and text that sits in a picture carrying plenty of other visual content.

Why it matters

The 4.5:1 figure at Level AA was set to compensate for vision loss around 20/40, which W3C describes as the typical acuity of somebody around 80. The 7:1 figure is set for 20/80. Past that point people generally use assistive technology with its own contrast enhancement, so 7:1 is close to the ceiling of what a page can do for a reader who is using none. It carries a bonus that is not obvious. The same calculation also compensates for color deficiency.

Who this rule protects

People with low vision and people with reduced contrast sensitivity gain most, and older readers are the group W3C names when it explains where the numbers came from.

How to check it yourself

  1. Measure your body text pair against 7:1, using the colors from the stylesheet rather than a screenshot, because anti-aliasing changes what the screen shows.
  2. Measure large text against 4.5:1, and check what counts as large. Eighteen point, or fourteen point bold.
  3. Measure placeholder text, hover text and focus text, all of which are in scope and all of which get missed.
  4. Check text sitting over a background image, which is a documented failure and the one a color picker never catches.
  5. Check the palette again in dark mode, where a pair that passed in light mode often does not.

Failures we see most often

  • Mid-gray body text clears 4.5:1 and stops there, short of the 7:1 bar.
  • Text sits over a photograph, so its contrast changes with every part of the image behind it.
  • A stylesheet sets a text color and never sets the background behind it, which fails this rule and two others with it.
  • Placeholder text gets styled pale because it looks quieter, and nobody measures it.

Who this one is for

Read from this rule's own note above, so the grouping and the note cannot disagree.

  • Low visionpeople who can see the screen but not easily

How this one is tested

We list 2 ACT rules against 1.4.6. Each one defines exactly what a checker looks at, which is how automated tools decide what to flag. Each one also checks a slice, so passing every rule here is not the same as meeting the criterion, and a rule can be proposed rather than approved or need a person to finish it. The note beside each says which.

How to fix it

  • Darken body text until it clears 7:1, then fix the design token rather than patching pages one at a time.
  • Keep the lighter brand shade for large text, where 4.5:1 applies, and for genuine decoration, which carries no contrast requirement at all.
  • Pick a font with thicker strokes where a thin one renders fainter than its declared color.
  • Where the brand genuinely cannot move, W3C documents a switch to a conforming version instead. Read the three conditions first, because that alternate page has to conform at the whole level, not only on contrast.
Step-by-step fix guides (7)

Passes vs. fails

A general illustration of the pattern rather than a test of 1.4.6. Passes: clears the ratio this rule sets. Fails: fashionable, unreadable gray.

Passes

#595959 on white measures 7.0047:1, which passes, with almost nothing to spare if the background is ever tinted.

Fails

#767676 on white measures 4.5422:1, which clears the Level AA bar by four hundredths and falls well short of 7:1.

In audits and lawsuits

This is Level AAA and the cheapest AAA criterion to adopt, because for most palettes it is a token change rather than a redesign. One sentence in W3C's own explanation settles more brand arguments than anything else in the standard. Corporate visual guidelines beyond the logo and logotype are not covered by the exception. Remember too that the thresholds are thresholds. W3C says outright not to round, so 4.499:1 does not pass 4.5:1, and a token clearing 7:1 by four thousandths has nothing left for a background that is not pure white.

Go somewhere useful

Find tools, resources and your workspace.

29 destinations