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