Level AAWCAG 2.2

1.4.5 Images of Text

Text is used to convey information rather than images of text.

Why it matters

Quality when enlarged
Images of text become blurry when enlarged, whereas real text stays sharp at any size.
Customization
With real text, users can change the font, color, and spacing to suit their own needs.
Assistive technology
Screen readers cannot read the letters inside images. Even with alt text the information is limited.
Translation and search
Real text works with browser translation and in-page search (Ctrl+F). Images of text do not.

Live demo

Image of text vs real text

100%
Image of text (simulated with canvas/SVG)
Special campaignLimited time 50% OFFUntil March 31, 2024
Real text (HTML/CSS)

Special campaign

Limited time 50% OFF

Until March 31, 2024

Problems with images of text

  • They become blurry when zoomed
  • Users cannot select or copy the text
  • Screen readers cannot read the text
  • Translation tools cannot work with it

Benefits of real text

  • It stays sharp at any size
  • Users can select and copy it
  • Assistive technologies can access it
  • Users can restyle it if they need to

Understand through a persona

Kimura (40) — Low vision (acuity 0.1)

He keeps the screen at 300% zoom or more. Banners and menus made from images of text become blurry and unreadable, while real text stays crisp. 'When sale details are in images only, I can't tell what's actually on discount.'

Checklist

References