WCAG 2.2 Demo Suite

1.4.9 Level AAA Guideline 1.4 Distinguishable Added in WCAG 2.0 Not detectable automatically

Images of Text (No Exception)

Images of text are used only for pure decoration or where a particular presentation is essential. The AA allowance for customisable images is removed.

Who this affects

Same population as 1.4.5, held to a stricter standard — no image of text at all unless the exact visual form carries the meaning.

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

Open the failing example in a new tab

fail.html — the problem

<h1>Spring festival</h1>

<!-- The distinction between 1.4.5 (AA) and 1.4.9 (AAA):
     1.4.5 allows an image of text if the user can CUSTOMISE its presentation.
     1.4.9 removes that allowance entirely. -->

<div class="panel">
  <h2>Customisable image of text — passes 1.4.5, fails 1.4.9</h2>
  <!-- The controls below let the user change the rendering, which is exactly
       what the AA exception permits. At AAA it is still a failure, because the
       text is still not real text: it cannot be selected, searched,
       translated, reflowed, or restyled by the user's own stylesheet. -->
  <p>
    <button type="button" class="button button--secondary" onclick="setSize(1)">Small</button>
    <button type="button" class="button button--secondary" onclick="setSize(1.6)">Large</button>
  </p>
  <img id="promo" src="../../assets/media/promo-heading.svg" width="420" height="70"
       alt="Three days of events, 12 to 14 April">
</div>

<div class="panel">
  <h2>Plain image of text — fails both</h2>
  <img src="../../assets/media/promo-terms.svg" width="420" height="96"
       alt="Tickets are non-refundable. Members save 20%. Under 16s go free with a paying adult.">
</div>

Meets 1.4.9

Open the passing example in a new tab

pass.html — the fix

<h1>Spring festival</h1>

<div class="panel">
  <h2>Real text, styled with CSS</h2>
  <!-- No image, so no exception is needed. The text scales, reflows, respects
       the user's font and spacing overrides, can be selected and searched, and
       is translatable. -->
  <p class="promo-heading">Three days of events, 12 to 14 April</p>
  <p>Tickets are non-refundable. Members save 20%.
     Under 16s go free with a paying adult.</p>
</div>

<div class="panel">
  <h2>The exceptions that survive at AAA</h2>
  <!-- 1. A LOGOTYPE. A brand's wordmark is text that is part of a logo, and it
          is exempt at every level. -->
  <p><img src="../../assets/media/award-badge.svg" width="72" height="72"
          alt="Winner of the 2026 Riverline Prize"></p>

  <!-- 2. ESSENTIAL presentation: where the exact visual rendering IS the
          information. A scanned historical document, a font specimen, or an
          image showing what a particular typeface looks like. -->
  <figure>
    <img src="../../assets/media/promo-heading.svg" width="420" height="70"
         alt="The festival wordmark set in Georgia Bold, showing the tight letter spacing used in the 2026 identity.">
    <figcaption>The 2026 festival wordmark. This image is showing you the
      <em>typography itself</em>, so the specific rendering is essential and the
      image is permitted.</figcaption>
  </figure>
</div>

<!-- The whole difference between 1.4.5 and 1.4.9 in one line: at AA you may
     ship an image of text if the user can customise it; at AAA you may not
     ship one at all unless it is a logotype or the rendering is the point.

     In practice, teams that adopt 1.4.9 do so because it forces a discipline
     that pays off everywhere - no more re-exporting banner artwork every time
     a price changes, and marketing copy that is searchable and translatable. -->

How to test it

As 1.4.5, but the only surviving exceptions are logotypes and cases where the specific rendering is the information (a font specimen, a scanned historical document).

  • Automated

    Requires human judgement about essentiality.

    No axe rule maps to this criterion. It has to be checked by a person.

  • 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