← All criteria

Perceivable · Level AA · 1.4.5

Images of Text

Real, selectable text should be used instead of a picture of text whenever the same visual result can be achieved with actual text — because a picture of text can't be resized, recolored, or restyled the way live text can.

  • Low vision
  • Cognitive
The problem, in practice — select the image to enlarge it
A travel-website hero banner comparing an image of text against real text. 'Don't use images of text' shows 'EXPLORE THE WORLD / ADVENTURE AWAITS' baked into a photo — it can't be resized, recolored, restyled, selected, or read by screen readers, and has a larger file size. 'Use real text' shows the same heading as live HTML text, which is selectable, searchable, resizable up to 200% without quality loss, restylable, and screen-reader accessible. A resize example shows the live text growing cleanly from 100% to 150% to 200%, while exceptions like logos, handwritten signatures, and neon signs remain acceptable uses of images of text since the presentation itself is essential to the content.

How to recognize it

Try to select the words in a heading, a banner, or a callout box: if the cursor won't select individual letters because it's actually a JPEG or PNG with the words baked into the pixels, and there was no real reason it needed to be an image, that's the failure. Someone with low vision who needs a specific font size, spacing, or high-contrast color scheme can adjust real text to match, but a picture of text stays exactly as rendered no matter what they change in their browser or OS settings. People with reading-related visual tracking or cognitive disabilities lose the same ability to restyle text into a form that's actually readable for them. The clear exception is a logo or brand wordmark — the specific rendering of a company's name in its brand typeface is the whole point, so that's allowed to stay an image.

How to fix it

Use real HTML text styled with CSS wherever the visual effect — a specific font, a color, a decorative treatment — can be achieved without flattening it into an image. Custom web fonts, CSS text effects, and SVG text (which still exposes the underlying text and remains stylable) all typically remove the need for a rasterized image entirely. Keep images of text only for genuinely essential cases: a logo, a screenshot that's specifically illustrating what something looks like, or a case where the exact visual presentation itself is the point being made.

Example

Avoid

<img src="headline.png" alt="Save 20% this week only">
<!-- a plain promotional headline flattened into an image instead of styled text -->

Prefer

<h2 style="font-family: 'Custom Display', sans-serif; color: #b45309;">Save 20% this week only</h2>
<img src="logo.svg" alt="Acme Inc.">
<!-- a brand wordmark: the specific rendering is the point, so an image is appropriate here -->

Resources