Text must be real text, not a picture of text
Rule
image-of-text· Images & non-text content · impact serious · Live only (static → incomplete)
Why it matters
Text baked into an image stops being text. It does not reflow, it blurs when the page is zoomed, it ignores the reader’s font, spacing and colour settings, and it cannot be selected, searched or translated. A screen-reader user gets only whatever the alt attribute happens to say, which is rarely the full wording. The engine examines the rendered pixels of each image and reports the ones whose structure is that of set type — few colours, ink gathered into horizontal bands with clear gaps, and dense stroke edges within each band — rather than that of a photograph. Logos and brand marks are exempt under this criterion and are skipped.
How to fix
Replace the image with real text styled in CSS — web fonts, gradients, shadows and background images behind live text all reproduce the design. Keep an image only where the particular presentation is essential (a logotype, or a sample of typography being discussed).
Example
<img src="summer-sale-banner.png" alt="Summer sale — 30% off everything">
<h2 class="banner">Summer sale — <strong>30% off</strong> everything</h2>
WCAG success criteria
1.4.5 Images of Text — Level AA
Use real text rather than a picture of text wherever the same visual presentation can be achieved — images of text do not reflow, restyle, or scale cleanly. Logotypes and essential presentations are exempt.
Standards
This rule contributes to the following standards:
WCAG AA EN 301 549
| Standard | Criteria |
|---|---|
| EN 301 549 | 9.1.4.5 |