Contrast (Minimum)

Who this affects

Users with low vision, reduced contrast sensitivity, or age-related sight loss. Also anyone reading on a phone in sunlight.

The failure and the fix

Each example below is a self-contained page, loaded in a frame so its markup cannot affect this page. Open either one on its own to test it with a keyboard or screen reader.

<h1>Your order</h1>

<!-- FAILURE 1: light grey body text. 2.3:1, against a 4.5:1 requirement.
     This is the single most common finding in any real accessibility audit,
     and it almost always comes from a designer picking grey on a calibrated
     monitor in a dark room. -->
<p class="muted">Order #1041, placed on 3 March 2026.</p>

<!-- FAILURE 2: even lighter "secondary" text at 1.7:1 - effectively invisible
     to a lot of people, including anyone reading outdoors. -->
<p class="ghost">Delivery usually takes 3 to 5 working days.</p>

<!-- FAILURE 3: white on a pale brand colour, 1.9:1. Brand palettes are the
     usual culprit; the fix is a darker tint for text, not abandoning the
     brand. -->
<button type="button" class="brand">Track this order</button>

<!-- FAILURE 4: placeholder text at very low contrast. Placeholders are real
     text and are in scope for 1.4.3 - another reason not to use them as
     labels (see 3.3.2). -->
<div class="field">
  <label for="q" class="muted">Order reference</label>
  <input type="text" id="q" class="placeholder-demo" placeholder="e.g. 1041">
</div>

<!-- FAILURE 5: text over an image. The contrast changes across the image, so
     it must be measured at its WORST point - and scanners generally skip this
     case entirely, reporting nothing. -->
<p class="on-image">Sales are up 40% this quarter.</p>

<h1>Your order</h1>

<!-- FIX 1: "secondary" text is still visually quieter, but at 8.7:1 it clears
     AA with room to spare and even meets 1.4.6 at AAA. You get hierarchy from
     size, weight and spacing - contrast is the wrong dial to turn down. -->
<p class="secondary">Order #1041, placed on 3 March 2026.</p>
<p class="secondary">Delivery usually takes 3 to 5 working days.</p>

<!-- FIX 2: a darker tint of the same brand hue. 8.0:1. -->
<button type="button" class="brand">Track this order</button>

<!-- FIX 3: a real, visible label instead of relying on the placeholder, and no
     placeholder styling that drops below the threshold. -->
<div class="field">
  <label for="q">Order reference</label>
  <input type="text" id="q">
</div>

<!-- FIX 4: text over an image needs a guaranteed background. A solid scrim
     makes the contrast deterministic rather than dependent on which part of
     the image happens to sit behind the text. -->
<div class="scrim">
  <img src="../../assets/media/sales-chart.svg" alt="" width="360" height="200">
  <p>Sales are up 40% this quarter.</p>
</div>

<!-- The thresholds:
       normal text        4.5:1
       large text         3:1   (18pt / 24px, or 14pt / 18.66px bold)
       logos, and text in an inactive control    exempt
     Test EVERY state, not just the default: hover, focus, visited, and
     disabled controls that still convey information. -->

How to test it

Sample foreground and background with a contrast checker. Test every state — default, hover, focus, visited, disabled-but-meaningful — and text over images or gradients at its worst point.

• Automated

  Scanners compute contrast accurately for solid backgrounds. They skip or guess when text sits on an image, a gradient, or a semi-transparent overlay, and they cannot test states they do not trigger.

  Relevant axe rules:

  • color-contrast

• Keyboard

  Unplug the mouse. Move through the page with Tab, Shift+Tab, Enter, Space and the arrow keys. See the keyboard testing script.

• Screen reader

  Listen to both examples with NVDA, JAWS, VoiceOver or TalkBack and compare what is announced. See the screen reader cheat sheets.

• Visual

  Zoom to 200% and 400%, narrow the viewport to 320 px, and apply the text-spacing overrides. See the visual testing procedures.

Related criteria

• 1.4.6 Contrast (Enhanced) (Level AAA)
• 1.4.11 Non-text Contrast (Level AA)
• 1.4.1 Use of Color (Level A)

In the specification

• Understanding 1.4.3 Contrast (Minimum) — the W3C explanation, intent and exceptions
• 1.4.3 in the WCAG 2.2 Recommendation — the normative wording