Level AA

79.1% of home pages have low-contrast text -- the most frequently detected WCAG failure in the WebAIM Million

1.4.3 Contrast (Minimum)

In Plain Language

[1.4.3 Contrast (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html) is a Level AA criterion that sets a floor on the luminance difference between text and its background[1]. Normal text must hit a contrast ratio of at least **4.5:1**. Large text -- 18pt or larger regular, or 14pt or larger bold (roughly 24px and 18.66px bold in CSS pixels) -- must hit at least **3:1**.

The ratio is computed from the WCAG formula `(L1 + 0.05) / (L2 + 0.05)`, where `L1` is the relative luminance of the lighter color and `L2` the darker. Relative luminance is derived from sRGB channels after gamma correction, not from hex values or HSL lightness, so two colors that look "equally bright" can compute to very different luminances. Ratios range from `1:1` (identical colors) to `21:1` (pure black on pure white), and the spec forbids rounding -- `4.499:1` fails the `4.5:1` threshold[1].

Why It Matters

  • Insufficient contrast does not "make text harder to read" -- it makes text invisible to a meaningful slice of users. People with low vision, age-related macular degeneration, cataracts, or diabetic retinopathy cannot resolve glyphs whose luminance is close to the background. The 4.5:1 floor is calibrated to users with roughly 20/40 vision without additional assistive technology[1].
  • Color vision deficiency compounds the problem. Users with protanopia, deuteranopia, or tritanopia collapse certain hue pairs to near-identical luminance, so a red-on-green or blue-on-purple pairing that a trichromatic designer reads as high-contrast can computed below 3:1 for those users.
  • Environmental contrast loss hits everyone. Direct sunlight on a phone screen, a projector in a lit room, and a laptop on battery-saver dimming all reduce the effective delivered contrast. A design that sits just above 4.5:1 in a dark room can drop below 3:1 in real viewing conditions.
  • Low-contrast text was detected on 79.1% of home pages in the WebAIM Million 2026 crawl of the top 1,000,000 sites -- the most frequently detected WCAG failure in the dataset[2].

Examples

Do: Body copy with headroom above the floor

`#1f2937` on `#ffffff` computes to 15.3:1, well above the 4.5:1 normal-text threshold. Headroom absorbs future theme tweaks without dropping below the floor.

body {
  color: #1f2937;       /* slate-800 */
  background: #ffffff;  /* white */
}
Don't: Placeholder-gray body copy

`#9ca3af` on `#ffffff` computes to 2.85:1 -- below both the 4.5:1 normal-text floor and the 3:1 large-text floor. Common failure mode: treating placeholder gray or `::placeholder` defaults as a content color.

/* FAILS: 2.85:1 contrast ratio */
.meta {
  color: #9ca3af;       /* gray-400 */
  background: #ffffff;
}
Do: Large text using the 3:1 threshold

Text at 18pt or larger regular, or 14pt or larger bold, qualifies as large text and only needs 3:1[5]. `#475569` on `#ffffff` computes to 7.46:1 and clears both thresholds.

h1 {
  font-size: 2rem;      /* 32px -- large text */
  font-weight: 700;
  color: #475569;       /* slate-600 on white = 7.46:1 */
}
Don't: Text over an unconstrained photo

Contrast is computed against the actual pixels behind each glyph. A photographic background produces a different ratio under every letter, and bright patches routinely drop below 4.5:1 while the rest of the hero passes. Fix by compositing a solid or gradient scrim with a known luminance between the image and the text.

/* FAILS: ratio varies across the hero image */
.hero-title {
  color: #ffffff;
  background-image: url('hero.jpg');
  /* no overlay, no scrim, no text shadow */
}

How to Fix It

  1. Compute the ratio, do not eyeball it. Relative luminance is not the same as HSL lightness. Run every text/background pair through a WCAG 2 contrast formula and confirm it clears 4.5:1 for normal text or 3:1 for large text (18pt+ regular, 14pt+ bold)[1]. Do not round -- 4.49:1 fails.
  2. Shift luminance, not hue. The cheapest fix is usually to darken the text or lighten the background by a few luminance steps. Designers often reach for a different hue first, but hue changes do not reliably move the computed ratio.
  3. Control the background under text over images. Composite a solid-color scrim, gradient overlay, or filled text container between the image and the text so the effective background has a known luminance. A text shadow is a mitigation for edge cases, not a substitute for a controlled background.
  4. Verify both color schemes. Dark mode is not a free pass. Light-on-dark pairs are evaluated with the same formula and must clear the same 4.5:1 / 3:1 thresholds. Test each theme independently.
  5. Check state colors. Hover, focus, visited, and disabled states frequently slip below the floor even when the base state passes. Disabled controls are exempt from 1.4.3 per the incidental-text clause, but the exemption does not extend to low-contrast active labels dressed up as "muted" text[1].
  6. Know the exceptions and do not abuse them. 1.4.3 exempts text in inactive UI components, pure decoration, text not visible to anyone, text incidental to a picture with significant other visual content, and text that is part of a logo or brand name[1]. None of these cover body copy, form labels, error messages, or navigation.
  7. Distinguish 1.4.3 from its neighbors. [1.4.6 Contrast (Enhanced)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-enhanced.html) raises the bar at Level AAA to 7:1 normal / 4.5:1 large. [1.4.11 Non-text Contrast](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html) governs UI components and graphical objects at 3:1 and does not apply to text. Auditing a button label uses 1.4.3; auditing the button's border uses 1.4.11.

References

  1. [1] W3C (2023). Understanding Success Criterion 1.4.3: Contrast (Minimum). W3C, Accessed 2026-04-07. https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html ↩ ↩ ↩ ↩ ↩ ↩
  2. [2] WebAIM (2026). The WebAIM Million: An accessibility analysis of the top 1,000,000 home pages. WebAIM, Accessed 2026-04-07. https://webaim.org/projects/million/ ↩
  3. [3] W3C (2026). ARIA in HTML. W3C, Accessed 2026-04-07. https://www.w3.org/TR/html-aria/ ↩
  4. [4] W3C (2024). WAI-ARIA Authoring Practices Guide. W3C, Accessed 2026-04-07. https://www.w3.org/WAI/ARIA/apg/ ↩