Image text
An image text is an image whose visible content is text. Instead of using real HTML text styled with CSS, the text is flattened into an image file (PNG, JPG…). Users can then neither resize it, change the font, nor read it with a screen reader.
Your designer exports a banner "–50% off everything" from Canva as a JPG. On desktop, the rendering is perfect. On mobile, the text shrinks until it becomes unreadable. At 200% zoom, it pixelates. A screen reader sees only an image with an alt attribute, if one exists.
#Why real text always wins
WCAG criterion 1.4.5 (level AA) is crystal clear: if the technology allows you to achieve the same visual rendering, use HTML text. Not an image.
The reasons are concrete:
- Zoom: HTML text remains sharp at 400%. A PNG becomes blurry at 150%.
- Customization: users can adjust font, size, line height and colors on real text. On an image, nothing.
- High contrast mode: operating systems invert the colors of HTML text. Text in an image keeps its original colors, sometimes unreadable in inverted mode.
- Screen readers: a screen reader restores the entire
altin a single sentence, without line breaks or structure. An entire paragraph flattened into an image becomes audio mush.
<!-- Image text: to avoid -->
<img src="promo-banner.jpg" alt="-50% off everything until March 31">
<!-- Real text: accessible and customizable -->
<p class="banner">
-50% off everything
<time datetime="2026-03-31">until March 31</time>
</p>#The trap of the "good alt"
Many people think that a well-written alt solves the problem. The alt makes the image understandable, not customizable. A dyslexic user who needs the OpenDyslexic font cannot apply it to your JPG banner, even with the best alt in the world.
Another blind spot: translation. Translation tools built into browsers translate HTML text, not text embedded in an image. A non-English speaking visitor facing your banner will see only incomprehensible pixels.
RGAA addresses this in criterion 1.8: an image text carrying information must be replaced by styled text when technically possible.
#Legitimate exceptions
Two cases where image text remains acceptable:
- Logos: the text is part of the visual identity (logo, brand name). This is an explicit exception in WCAG.
- Presentation is essential: typography is the information, for example a font sample, a reproduction of a historical document or a screenshot.
Everything else (banners, buttons, headings, menus) must be real text.
#In summary
If you can achieve the same result in HTML and CSS, do not put your text in an image. Real text resizes, customizes and is read by assistive technologies. Image text remains frozen.