1. Home
  2. :
  3. Roles
  4. :
  5. UX Designer
  6. :
  7. Avoid text in images

Avoid text in images

Back in the early days of the internet, when we didn’t have CSS, a lot of sites were built with images that had text in them. 

While these formats were visually appealing, people with low vision or other visual disabilities couldn’t modify the text using their browser’s toolset to be larger or have higher contrast.

Today, we have the skill and technology to overlay text on images so that both are accessible to the user. We should use this at every possible opportunity, and avoid putting text in images unless it’s essential.

Where is text allowed in an image?

Both WCAG 1.4.5 Images of Text and WCAG 1.4.9 Images of Text (No Exception) allows for the use of images with text when the fact that the text is in an image format is essential. Examples include:

  • The text is a logotype such as your company logo.
  • The display of the text is critical, such as a screenshot of a font family or a photograph of a letter.
  • Symbolic text characters are being displayed, such as using a GIF of the letter “B” as the icon on the “bold” button in a rich text editor. 
  • The images has other significant content, such as a picture of a bar chart that includes text, or a photograph of a person wearing a name tag.

WCAG 1.4.5 Images of Text also allows for the following exception:

  • The user can still control the display of the text, such as when a tool allows the user to customize text on an image. 

Note: the font, size, text color, and background color must all be customizable in this case.

How to document text overlays

Since text in images should be limited to the examples above, if you want to produce a banner or other image with text overlaid on top of it, you will need to document the text properties in your wireframes or redlines so that the developer knows how to style the text in CSS. Ensure that you include:

  • Margins from the edges of the background.
    • Include whether the text is left, right, or center aligned to the background if the background is resized.
  • Font face.
  • Font size.
  • Font color.
  • Line height.
  • Drop shadow (if necessary).
  • Any other font adjustments (letter spacing, etc.) that you’ve made.