Home WCAG

WCAG 1.4.3 Contrast (Minimum)

Visual presentation of text and images of text must have a contrast ratio of at least 4.5:1, with documented exceptions for large text, incidental text, and logotypes.

Normative spec
https://www.w3.org/TR/WCAG22/#contrast-minimum
Last verified
Byline
Editorial team

What this success criterion requires

Success Criterion 1.4.3 of WCAG 2.2 (Level AA) sets a numeric floor on the contrast between text colour and its background. The floor is 4.5:1 for normal text and 3:1 for large text. Large text means at least 18 point (about 24 CSS pixels) or 14 point bold (about 19 CSS pixels bold). The contrast is computed from the relative luminance of each colour, defined in the spec at the URL above.

Why it matters

Adults lose visual sensitivity with age. Many people have transient visual constraints — bright sunlight, glare, a scratched phone screen, a dim cabin on a plane. A page that is comfortable in a controlled office is often unreadable in those conditions. The 4.5:1 floor was calibrated against the Snellen acuity equivalent of about 20/40 vision without lens correction. It is not the highest possible target — for people with stronger visual disabilities, Success Criterion 1.4.6 Contrast (Enhanced) raises the floor to 7:1.

Exceptions

The criterion lists three exceptions that are not failures:

  1. Incidental text — text that is part of an inactive UI control, pure decoration, an image of an irrelevant object, or text that is not visible to anyone (such as off-screen menu items).
  2. Logotypes — the word mark in a logo is exempt. The exception is narrow: a tagline beneath the logo is not exempt.
  3. Large text uses the 3:1 floor instead of 4.5:1.

A common authoring mistake is to read “incidental” too broadly. Disabled form controls communicate state; users still need to read them. The spec treats placeholder text as conveying meaning when the form lacks visible labels — placeholder must meet 4.5:1 in that case.

What a passing implementation looks like for end users

A reader scanning the page can read every text run from a comfortable distance, regardless of ambient light. Disabled controls are recognisable as text, even if visually de-emphasised. Hover and focus styles preserve contrast — a button that meets 4.5:1 at rest must still meet 4.5:1 when focused. Dark-mode and light-mode palettes are designed and tested independently; switching modes does not introduce a regression.

Computing contrast

The relative luminance formula is defined in WCAG 2.x. It applies a gamma-decoded weighted sum: 0.2126 R + 0.7152 G + 0.0722 B, where each channel is first linearised. The contrast ratio between two colours is then (L1 + 0.05) / (L2 + 0.05), with L1 >= L2.

Many design systems compute and store the contrast ratio of every token pair. CSS authors can also rely on the color-contrast() proposal (currently CSS Color 6) where supported, falling back to a static foreground per token.

Browser engine support for relevant primitives

Contrast is computed by the browser at composition; engines render the colours, but authors are responsible for picking them. The CSS Color Module Level 4 wide-gamut features are supported across Chromium (Blink), WebKit, and Gecko since 2023. Where wide-gamut display-P3 is used, authors should re-test contrast in the actual rendered colour space, since sRGB-only contrast ratios do not generalise to P3 without recomputation.

Common pitfalls

  • Light grey on white placeholder text often lands near 2.5:1.
  • Brand-colour buttons with white text frequently miss 4.5:1 (orange, yellow, lime). Darken the button or switch to dark text.
  • Anti-aliased text on noisy photo backgrounds can pass on average but fail locally. Use a solid scrim or text shadow.
  • Disabled controls are not exempt. Use a tone that still meets the floor; communicate disabled state with non-colour cues as well.

Verification techniques

Automated tools (axe, the engine-built-in accessibility panels in Chromium, WebKit, and Gecko, and stand-alone CLI checkers) can flag ratios below 4.5:1 with high precision when the foreground/background pair is unambiguous. They cannot reliably check text over photographic backgrounds, gradients, or video; those need a human spot check.