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

<img src="sale-banner.png" alt="50% off everything">

Why it matters

Low-vision users who need scalable text, and people who customize fonts or colors.

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

Real text must be used instead of an image of text (except logos or where the exact rendering is essential).

<div class="banner"><p>50% off everything</p></div>

Real text can be resized, recolored, and read aloud accurately — an image of text can't.

Outcome

On a music streaming app's playlist screen, this barrier is gone for low-vision users who need scalable text — they get the same result as anyone else here.

Who is affected