Insufficient color contrast

contrast/text-undetermined

WCAG success criterion: 1.4.3 (level AA)
Outcome class: Hint only. An automated check that by design reports review hints only: its findings are marked for manual review, never as confirmed violations.
Area: Accessibility, Visual Presentation
Default severity: high
axe-core rule: color-contrast

Why we flag this

Text is hard to read for people with low vision or under poor lighting conditions.

Contrast ratio below 4.5:1 for normal text.

What the rule checks

Scope. Elements carrying rendered, visible text whose foreground or background colour cannot be resolved, or whose centre is covered by a foreign fixed or sticky element.

Expectation. Reports a review (UNTESTED) instead of a pass or fail when the contrast cannot be measured: glyphs painted transparent over a gradient (background-clip: text), no resolvable colour, or the text covered by a fixed/sticky overlay such as a cookie banner (the overlay's own text is measurable and not reported). Over an image or gradient that can be sampled, a median that passes with a 40th percentile that fails is a borderline review under this id as well. Text on a solid background never produces this finding. It is never a confirmed violation.

Source. WCAG 2.2 SC 1.4.3 Contrast (Minimum); a11y-rules rule 3 (not determinable is not a pass)

Detection: shared; needs dom, computed_style, geometry.

Failing example

The check flags this for review. Corpus case visual_contrast_covered, element p#covered. The page may contain further findings for other rules.

visual_contrast_covered.htmlHTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Contrast under a fixed banner</title>
<style>
  body { margin: 0; background: #ffffff; color: #111111; }
  #banner { position: fixed; top: 0; left: 0; width: 100%; height: 110px; margin: 0;
            background: #ffffff; color: #111111; border-bottom: 2px solid #111111; z-index: 10; }
  #covered { margin: 0; padding-top: 30px; color: #111111; }
  main { margin-top: 160px; padding: 0 8px; }
</style>
</head>
<body>
<header>
  <!-- A fixed banner covers the next paragraph: its contrast cannot be
       determined with the overlay open, which is a review, not a pass. -->
  <p id="banner">We use cookies to run this shop.</p>
  <p id="covered">Opening hours: Monday to Friday, 9 to 18.</p>
</header>
<main id="main">
  <h1>Text behind a fixed overlay</h1>
  <p id="solid">This paragraph sits on a solid white background.</p>
</main>
<footer><p>Footer text</p>
  <a href="#main" style="display: inline-block; min-width: 44px; min-height: 44px; line-height: 44px; padding: 0 8px">Skip to main content</a>
  <nav aria-label="Main"><a href="#main" aria-current="page" style="display: inline-block; min-width: 44px; min-height: 44px; line-height: 44px; padding: 0 8px">Overview</a></nav>
</footer>
</body>
</html>

Passing example

The check passes here and reports nothing. Corpus case visual_contrast_covered, element p#banner. The page may contain further findings for other rules.

visual_contrast_covered.htmlHTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Contrast under a fixed banner</title>
<style>
  body { margin: 0; background: #ffffff; color: #111111; }
  #banner { position: fixed; top: 0; left: 0; width: 100%; height: 110px; margin: 0;
            background: #ffffff; color: #111111; border-bottom: 2px solid #111111; z-index: 10; }
  #covered { margin: 0; padding-top: 30px; color: #111111; }
  main { margin-top: 160px; padding: 0 8px; }
</style>
</head>
<body>
<header>
  <!-- A fixed banner covers the next paragraph: its contrast cannot be
       determined with the overlay open, which is a review, not a pass. -->
  <p id="banner">We use cookies to run this shop.</p>
  <p id="covered">Opening hours: Monday to Friday, 9 to 18.</p>
</header>
<main id="main">
  <h1>Text behind a fixed overlay</h1>
  <p id="solid">This paragraph sits on a solid white background.</p>
</main>
<footer><p>Footer text</p>
  <a href="#main" style="display: inline-block; min-width: 44px; min-height: 44px; line-height: 44px; padding: 0 8px">Skip to main content</a>
  <nav aria-label="Main"><a href="#main" aria-current="page" style="display: inline-block; min-width: 44px; min-height: 44px; line-height: 44px; padding: 0 8px">Overview</a></nav>
</footer>
</body>
</html>

This page is generated from the rule catalogue and the rule contracts; see therule overview for how the outcome classes are derived.