Skip to content
tally learning

Images of Text

7 minute read

Last updated:

Summary

Section titled “Summary”

Use actual text instead of images containing text whenever possible. Text embedded in images will distort when zoomed in, will be difficult to read on mobile devices, and will not be customizable when readers need to adjust the text and background to increase contrast or change the size or spacing of the text.

Overview

Section titled “Overview”

It is best to use actual text for all informative images. Real text is adjustable in ways that make it easily accessible for most people.

Text that is part of an image will be distorted when magnification software is used, or the browser is zoomed in. This makes it challenging for people with low or limited vision to read the text.

Real text is customizable and allows more people to clearly see and understand the content. When images of text are used, people lose the ability to customize the text and background to increase contrast or adjust the text spacing. For example, someone with dyslexia may need to change the font or line spacing, and someone who is color blind may need to adjust colors to read text.

Real text can reflow to fit different sizes and screens, such as differently-sized mobile devices. This ability is lost with images of text.

Logos and decorative images containing text are exceptions.

Who is Helped

Section titled “Who is Helped”

Images of text can present challenges for some individuals.

  • People who are visually impaired or have low vision and use magnification software can struggle with images of text, as they cannot magnify these images without the text becoming distorted.
  • People who are blind or have low or limited vision and use screen readers or other speech-to-text software to access information cannot see text in images and must rely on alt text or some other text alternative to provide equivalent information. Alt text alone cannot be used for large amounts of text since screen readers read alt text as a single run-on sentence without any formatting and do not provide users with the ability to go back and repeat missed content.
  • People who are colorblind or who are sensory sensitive to certain colors cannot adjust the text and background colors.
  • People with cognitive and learning disabilities that impact reading skills, like dyslexia, cannot adjust the font size or spacing to improve readability in images of text.
  • Anyone using a mobile device will struggle with images of text as images become smaller and lines of text cannot reflow in the image.
Text in an image. The text reads, “Make the internet accessible to all!!”
Figure 1: Text in an Image, Not Zoomed In
Zoomed-in image of text. Only the word “Make” is seen, and it is extremely blurry.
Figure 2: Text in an Image, Zoomed In

Guidelines

Section titled “Guidelines”

Always use real text instead of images containing text whenever possible. Real text allows for customization of text size, style, color, and spacing, and maintains its readability when a web page is zoomed in. Real text can be styled using Cascading Style Sheets (CSS) when its appearance needs to be modified. For example, CSS can be used to create a unique style for a heading or to make it look like a handwritten note.

Be thoughtful about decisions to use images of text.

  • Can CSS be used to style real text instead of using an image of text?
  • Can real text be used on the web page with a link to the more artistic version of a poster or event flyer?

When images of text must be used:

  • The text presented in the image must be presented in a text alternative.
    • When the text in an image is one sentence or less, repeat the text in the alt text.
    • When the text in an image is longer than a sentence, repeat the text in the image on the page as regular text.
    • If the image is a link, use the destination of the link as the alt text.
    • If the image is a button, use the text of the button as the alt text.
  • Use good contrast for text. When the text in an image conveys content, the rules for good text contrast still apply.
    • Use techniques like borders, drop shadows, and semi-transparent contrast layers to ensure text has good contrast when placed over a multi-colored image, such as a photograph.

The following image from the U.S. Government IRS.gov website illustrates the use of a semi-transparent contrast layer between the text and the image to ensure good contrast.

Black text is placed over a semi-transparent layer of white. The image is seen through the semi-transparent layer, but there is sufficient contrast that the text can be read even over the darkest areas of the image.
Figure 3: Text over an Image with Semi-transparent Contrast Layer
  • Provide extra resolution when possible so that text stays sharp when enlarged.
  • Use vector images (SVG) when possible so that the text stays sharp when the image is scaled up.
  • Use CSS to replace text with images of text and provide controls that allow individuals to switch between views of the content according to their preferences.
  • Use dynamically-generated images and provide controls that allow individuals to adjust the text and the foreground and background colors of the generated image.

Only use an image of math when it is an exception to the regular content of the page. If math is a regular part of the content, then MathML should be used instead.

Screenshot of the Accessible Community home page. The logo and site title are highlighted as a single image.
Figure 4: Logo and Site Title Combined as a Single Image

This screenshot of the Accessible Community home page contains the highlighted image of the Accessible Community logo that also includes the text for the site title, “Accessible Community, Building Disability-Friendly Communities,” which is not part of the logo.

Exceptions

Section titled “Exceptions”

Any image where a particular presentation of the text is essential to the information being conveyed is exempt from this guidance. For example, text in a logo is considered essential to its presentation and is exempt.

Purely decorative images containing text, such as random words used in a background image, are also exempt.

Note that the guidelines for images of text do not include images that contain significant other visual content, such as graphs, screenshots, or diagrams.

How to Test

Section titled “How to Test”

To test, use a mouse to click and drag the cursor over a page.

  • If the word highlights letter by letter, it is text.
  • If it is highlighted as a block, then it is an image of text.

In Figure 5, the letters on the Accessible Community home page are highlighted letter by letter when a mouse is dragged over them. In this example, the text for the site title has been converted to true text, so there are no images of text.

Screenshot showing the content on the Accessible Community home page highlighted to look for images of text.
Figure 5: Accessible Community Home Page with Text Highlighted

Another method to test for images of text is by using an accessibility test tool like the WAVE browser extension to discover images of text on a page. Look at the WAVE test results and ask:

  • Are there images on the page?
  • If yes, do any of the images have text?
  • If yes, is the text important to the meaning of the page?
  • If yes, can you replace the image with real text?
  • If not, is the text provided to users in an alternative format?
Screenshot showing Wave tool results on the Cat House Rules page, see text for full description.
Figure 6: WAVE Test Results for the Cat House Rules Web Page

Figure 6 shows the WAVE test results for a sample page called “Cat House Rules”. In this example, the title “Cat House Rules” is an image containing text. WAVE identified the title as an image with the alt text “Cat House Rules.”

References

Section titled “References”