Images of Text: What Actually Works
Text presented inside an image, such as headlines baked into banners or quotes saved as graphics, instead of real text styled with CSS.
Marcus Adeyemi
What is at stake
Text in images cannot be resized cleanly, restyled for readability, translated or read reliably by assistive technology, and WCAG limits it at level AA.
The playbook
- Set headlines and banners as live text over images
- Use web fonts for brand typography
- Give any unavoidable text image full alt text
- Check promotional banners from marketing tools
- Keep charts' key labels as text where possible
Where it goes wrong
Avoid:
- Hero banners exported as single images
- Quotes and testimonials saved as graphics
- Menus built from images
- Screenshots of text instead of the text itself
The numbers behind it
| Measure | Figure |
|---|---|
| WCAG 1.4.5 Images of Text, AA | use real text rather than images of text when the technology allows the same presentation |
| Exceptions | logos and text where a particular presentation is essential |
| WCAG 1.4.9, AAA | images of text only for decoration or where essential |
| Web fonts | make most visual styles possible with real text |
Getting outside help
When to hand it over: Bring in help when marketing banners are produced as flat images, or when content must be translated into several languages.
Where this comes from
- W3C Web Accessibility Initiative — Understanding SC 1.4.5 Images of Text
- MDN Web Docs — Web fonts
The figures and practices above come from the sources listed.
Working on something like this?
We take on Performance & Accessibility work for teams who want it done once, properly. Tell us what you are building and we will tell you honestly whether we are the right studio for it. Start a project.
Where to go next
Spotted something wrong? Report an error on this page. We correct on the page and say what changed.
