Skip to content
A11ySignal
seriousWCAG 1.4.3 · AA

Elements must meet minimum color contrast ratio thresholds

color-contrast

Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds

The criterion behind it

1.4.3 Contrast (Minimum)

Text needs a contrast ratio of at least 4.5:1 against its background — 3:1 if it is large.

Level AA · EN 301 549 § 9.1.4.3

Why this check exists

This is the single most common failure on the web, on more than four out of five home pages. It affects everyone with reduced contrast sensitivity, which eventually means most people over sixty.

What usually triggers it

  • failsGrey placeholder or helper text on white — the classic #999 on #fff is 2.8:1.
  • failsWhite text on a brand colour that was chosen for a logo, not for body copy.
  • failsText over a photo with no scrim.
  • failsA disabled state faded so far that nobody can read what is disabled.

How to fix it

  • doMeasure before you ship. Large text is 18.66px bold or 24px regular — everything else needs 4.5:1.
  • doDarken the text rather than lightening the background; it usually preserves the design better.
  • doOver images, add a solid scrim or a text shadow that itself meets the ratio.
  • doFor disabled controls, keep the text readable and signal the state in words.

How it is reported

A11ySignal reports this at serious impact. Every failing element comes with its CSS selector and the markup that failed, so you can go straight to the line rather than hunting for it. Deque publishes the engine-level detail:

https://dequeuniversity.com/rules/axe/4.13/color-contrast

Check implemented by axe-core 4.13.0, © Deque Systems, MPL-2.0.