1.4.9 Images of Text (No Exception)

Level: AAA | Principle: Perceivable | Since: WCAG 2.0 | Automation: Manual

What This Means

Images of text must not be used at all, except for pure decoration. Unlike the Level AA version (1.4.5) which allows images of text when they are "essential" (like logos), this AAA criterion eliminates that exception. The only images of text permitted are those that are purely decorative.

Real text can be resized, recolored, reflowed, and read by screen readers. Images of text cannot. When text is rendered as an image, users lose the ability to customize it for their needs — they cannot change the font, increase the size beyond the image resolution, adjust colors for contrast, or copy the text.

This criterion pushes content authors to use CSS and web fonts for all textual content, ensuring maximum flexibility for users who need to adapt the presentation.

Who This Affects

Users with low vision — cannot resize image text beyond its native resolution without pixelation
Users who need custom stylesheets — cannot override font, size, or color of image text
Screen reader users — image text requires alt text, which may not be kept up to date
Users on slow connections — images are heavier than text and may fail to load

Common Pitfalls

1. Using images for stylized headings

<!-- Bad: heading rendered as image -->
<img src="welcome-heading.png" alt="Welcome to Our Store">

<!-- Good: use CSS for styling -->
<h1 style="font-family: 'Playfair Display', serif; font-size: 3rem;">Welcome to Our Store</h1>

2. Logos with taglines as images

<!-- Bad: logo + tagline as a single image -->
<img src="logo-with-tagline.png" alt="Acme Corp - Building the Future">

<!-- Good: logo as image, tagline as real text -->
<div class="brand">
  <img src="logo.png" alt="Acme Corp">
  <p class="tagline">Building the Future</p>
</div>

3. Buttons and navigation as images

<!-- Bad: image button -->
<a href="/signup"><img src="signup-button.png" alt="Sign Up Now"></a>

<!-- Good: styled HTML button -->
<a href="/signup" class="btn btn-primary">Sign Up Now</a>

How to Test

Inspect every image on the page for text content by right-clicking and selecting "Inspect" in DevTools.
For each image containing text, determine whether it is purely decorative (abstract pattern, background texture).
Flag any image with readable text that is not purely decorative, including headings, buttons, navigation items, and banners.
Zoom to 200% and look for any text that becomes pixelated or blurry, confirming it is an image.
Pass: No images of text exist on the page except for purely decorative images.
Fail: Any image contains readable, non-decorative text that could be rendered with HTML and CSS.

How to Fix

Replace all images of text with real HTML text styled with CSS
Use web fonts (@font-face or services like Google Fonts) for custom typography
Use CSS gradients, shadows, and transforms for decorative text effects
For logos, separate the logo mark (image) from any accompanying text (real text)
If a specific visual treatment is needed, use SVG with embedded text elements that remain accessible