Graphics are not used for text (except logos)

Design Notes

Do not include text in images

Users need as much information as possible in text format as this ensures that they can adjust its size, spacing or visual formatting.

Do not include text in graphical (raster) formats like PNG, JPEG or GIF. These formats don't work well when users zoom in as they become pixelated and harder to read.

Instead, put text in HTML (styled with CSS) or use SVG. Note: this doesn't apply to logos.

Developer Notes

Don’t use graphics of text

People with cognitive disabilities or those with partial sight may have trouble reading text with the authored font family, size and colour.

In order to read content comfortably, they may change the visual presentation of the content using their own style sheets.

Text should always be used to present information rather than an image as the presentation of content in an image can not be changed easily, if required.

If you're provided with an image asset which could be implemented in HTML, recommend this over using the visual asset. Often custom typefaces and visual styling via CSS can achieve desired effect. If this is not possible and text is included in image, try to include the text in HTML elsewhere on the page.

Testing Notes

Graphics are not used for text (except logos)

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:

  • Customizable: The image of text can be visually customized to the user's requirements;
  • Essential: A particular presentation of text is essential to the information being conveyed.

Note: Logotypes (text that is part of a logo or brand name) are considered essential.

Impact range: Medium - Low

Test type: Manual

WCAG Reference: Understanding Success Criterion 1.4.5 Images of Text