WCAG 2.2 Demo Suite

1.4.6 Level AAA Guideline 1.4 Distinguishable Added in WCAG 2.0 Partly detectable automatically

Contrast (Enhanced)

Text and images of text have a contrast ratio of at least 7:1, or 4.5:1 for large text.

Who this affects

Users with moderately low vision (roughly 20/80) who do not use assistive technology. The AA 4.5:1 threshold approximates 20/40 vision; 7:1 extends coverage further.

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.

Fails 1.4.6

Open the failing example in a new tab

fail.html — the problem

<h1>Your membership</h1>

<!-- 4.6:1. Comfortably over the 4.5:1 AA minimum, comfortably under 7:1. -->
<p class="body-text">Your membership renews on 1 April. Members get free delivery
   and priority booking for all events.</p>

<p class="body-text">See our <a class="link" href="#t">membership terms</a>.</p>

<button type="button" class="cta">Renew membership</button>

<!-- Large text: 3.1:1 passes AA (where large text only needs 3:1) but fails
     AAA (where large text needs 4.5:1). -->
<p class="big">Renewing saves you £12 a year</p>

<p id="t">Terms.</p>

Meets 1.4.6

Open the passing example in a new tab

pass.html — the fix

<h1>Your membership</h1>

<p class="body-text">Your membership renews on 1 April. Members get free delivery
   and priority booking for all events.</p>

<p class="body-text">See our <a class="link" href="#t">membership terms</a>.</p>

<button type="button" class="cta">Renew membership</button>

<p class="big">Renewing saves you £12 a year</p>

<!-- The thresholds:
       normal text   7:1    (AA asks 4.5:1)
       large text    4.5:1  (AA asks 3:1)
     Large text is still 18pt / 24px, or 14pt / 18.66px bold.

     Why it matters: the AA 4.5:1 figure is calibrated to roughly 20/40 vision.
     7:1 extends that to about 20/80 - which covers a large population of older
     users and people with low vision who do not use any assistive technology
     and would never describe themselves as disabled.

     Is AAA realistic here? For text contrast, unusually, yes. Most palettes
     can reach 7:1 by darkening a few tokens, and it costs nothing at runtime.
     This is one of the AAA criteria genuinely worth adopting site-wide - which
     is why the teaching pages of this suite hold themselves to it. -->

<p id="t">Terms.</p>

How to test it

Same procedure as 1.4.3 with the higher thresholds. Check whether the palette can meet 7:1 without becoming pure black on white.

  • Automated

    Same tooling as 1.4.3, configured to the AAA threshold; same blind spots.

    Relevant axe rules:

    • color-contrast-enhanced

  • 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.

In the specification