• Success Criterion 1.4.5
  • Conformance level AA

Text-Heavy Content Rendered as an Image Instead of Real Text

1.4.5 — Images of Text

Scenario

Setting

A music streaming app's playlist screen

What’s wrong

A promotional banner renders its headline and price as a single flattened image instead of live text, so the text can't be resized, recolored, or reflowed by the user.

Example 

<div class="promo-banner">
  <img src="go-premium-banner.jpg" alt="Go Premium">
  <!-- the jpg itself contains the rendered headline "Go Premium" and price "$9.99/mo" -->
</div>

Why it matters

A listener who increases browser font size or switches to a high-contrast theme still sees the same fixed, low-res price, because it's pixels in a photo, not real characters.

How to test

Try to select suspect heading/paragraph text with a cursor drag: if it can't be highlighted (because it's an image), and it's not a logo or essential presentation, it fails.

How to fix

Keep the background artwork as a CSS background-image and layer real text on top so it inherits the user's font and color settings.

<div class="promo-banner">
  <h2>Go Premium</h2>
  <p class="price">$9.99/mo</p>
</div>

Outcome

A listener zooms to 200% and the price stays sharp instead of turning into a blurry photo.

Who is affected

Low-vision listeners who rely on browser zoom or custom colors get a blurry image instead of crisp, resizable text.

Learn more

Related scenarios