Don’t create images of text
Summary: Using images of text will prevent certain users from using that content.
Images of text will prevent some users’ from being able to experience that content.
| People with… | Want to : | Experience of image of text |
|---|---|---|
| low vision | Magnify the content | can pixelate and become unreadable |
| reading difficulties | change the text size, colour, alignment, spacing or font face to make it readable | Unable to make those changes |
Success criterion 1.4.5 of the Guidelines says:
"If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text, except for the following:
- Customisable: The image of text can be visually customised to the user's requirements;
- Essential: A particular presentation of text is essential to the information being conveyed."
Styled text versus an image
If it’s technically possible to create the look you want using styled text, then you must do so.
Never use images of text for body content, headings, captions on images, tables or featured text (like pull quotes or advertisements).
Wherever possible, use styled text for the text elements in infographics.
Exceptions
Images of text are acceptable when they are:
- part of a graph, map, diagram, screenshot or logo
- essential to the information you’re presenting (for example, a photo of an historical artefact)
- not meant to be read (for example, incidental or decorative text).
Examples
| Before | After |
|---|---|
A decorative heading on a web page is presented as an image. |
The image is used as a background with text styled using CSS floating over the top. |
An infographic is presented as a large image. |
Text elements of the infographic are presented as headings and dot points, styled with CSS. The graphical elements are still used. |
A promotion for an event is presented as an image of text in a sidebar on a web page. |
Styles are created and the promotional information is presented as text in the sidebar. |