Images of Text: Why Real Text Beats Image Text for Accessibility

Introduction

WCAG 1.4.5 (Images of Text) requires that if the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text. This means using real HTML text with CSS styling instead of embedding text within images.

While images of text might seem like an easy way to achieve specific typography, they create significant accessibility barriers and usability problems for many users.

What WCAG Requires

1.4.5 Images of Text (Level AA)

If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text.

Exceptions:

• Customizable: The image can be visually customized to the user’s requirements
• Essential: A particular presentation of text is essential (like logos or branding)

This means:

• Use CSS to style text instead of creating text as images
• Logos containing text are allowed
• Text essential for conveying information (like brand names) may be images

Who Benefits

User Type	Benefit
Users with low vision	Can enlarge text without pixelation
Screen reader users	Text is read naturally, not as “image”
Users who need high contrast	Can apply custom stylesheets
Users with dyslexia	Can change fonts for readability
Search engines	Can index and understand content
All users	Text loads faster, scales better

Problems with Images of Text

1. Cannot Be Resized

<!-- BAD: Image text becomes pixelated when enlarged -->
<img src="heading-text.png" alt="Welcome to Our Site">

<!-- GOOD: Real text scales smoothly -->
<h1 class="custom-heading">Welcome to Our Site</h1>

2. Cannot Be Customized

Users with visual impairments often use browser settings or extensions to:

• Change font sizes
• Apply high contrast themes
• Use specific fonts (like OpenDyslexic)
• Adjust line spacing

Images of text cannot respond to these user preferences.

3. Slow to Load

<!-- Image of text: 50-200KB per image -->
<img src="large-decorative-heading.png" alt="Special Offer">

<!-- Real text with CSS: <1KB -->
<h2 class="decorative-heading">Special Offer</h2>

4. Accessibility Issues

• Screen readers announce “image” rather than reading naturally
• Cannot be selected or copied
• Translation tools cannot process the text
• Cannot be searched by in-page search (Ctrl+F)

Common Scenarios

Acceptable Uses of Images of Text

Logos and Branding

<!-- Acceptable: Logo contains essential brand presentation -->
<img src="company-logo.svg" alt="Acme Corporation">

Diagrams with Essential Text

<!-- Acceptable: Text is part of diagram's essential meaning -->
<figure>
  <img src="flowchart.png" alt="Process flowchart showing steps...">
  <figcaption>Figure 1: Approval process workflow</figcaption>
</figure>

Unacceptable Uses

Headlines and Body Text

<!-- BAD: Using image for headline -->
<img src="headline.png" alt="Our Services">

<!-- GOOD: Real text with custom styling -->
<h2 class="services-heading">Our Services</h2>

Buttons and Navigation

<!-- BAD: Image button -->
<button><img src="submit-button.png" alt="Submit"></button>

<!-- GOOD: Styled text button -->
<button class="submit-btn">Submit</button>

Call-to-Action Sections

<!-- BAD: Banner image with text -->
<img src="sale-banner.png" alt="50% Off Everything - Shop Now">

<!-- GOOD: HTML with CSS styling -->
<section class="sale-banner">
  <h2>50% Off Everything</h2>
  <a href="/shop" class="cta-button">Shop Now</a>
</section>

CSS Alternatives to Images of Text

Custom Fonts

/* Use web fonts for custom typography */
@font-face {
  font-family: 'CustomHeading';
  src: url('/fonts/custom-heading.woff2') format('woff2');
  font-display: swap;
}

.decorative-heading {
  font-family: 'CustomHeading', serif;
  font-size: 3rem;
}

Text Effects

/* Gradient text */
.gradient-text {
  background: linear-gradient(45deg, #e66465, #9198e5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Text shadow for depth */
.shadow-text {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* Outlined text */
.outline-text {
  -webkit-text-stroke: 2px #000;
  color: transparent;
}

Responsive Typography

/* Text that scales with viewport */
.hero-heading {
  font-size: clamp(2rem, 5vw, 5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

Testing for Images of Text

Quick Manual Test

1. Right-click text on the page
2. If “Save image” or “Copy image” appears, it’s likely an image of text
3. Try selecting the text - if you can’t highlight it, it may be an image
4. Use browser’s “Inspect Element” to verify if it’s <img> or text

What to Verify

• [ ] Headlines use real <h1>-<h6> elements, not images
• [ ] Body content is real text, not images
• [ ] Buttons contain text, not image labels
• [ ] Decorative text effects use CSS, not images
• [ ] Logos are the only images containing text (and have proper alt text)

Tools for Testing

• WAVE: Highlights images and their alt text
• axe DevTools: Reports images of text issues
• Browser DevTools: Inspect elements to verify text vs images
• Screen reader: Listen for natural text reading vs “image” announcements

Best Practices Summary

Do	Don’t
Use CSS for text styling	Create images with text
Use web fonts for custom typography	Screenshot text for unique fonts
Style buttons with CSS	Use image buttons
Use SVG icons with separate text	Bake text into icons
Keep logos as only text images	Use images for headlines

Related Articles

• Images of Text Implementation Guide - Detailed patterns
• Alt Text Guide - Image accessibility
• WCAG Compliance Hub - All accessibility evaluators

---

References

1. W3C - WCAG 2.2 SC 1.4.5 Images of Text
2. W3C - C22 Using CSS to control visual presentation of text
3. WebAIM - Alternative Text
4. MDN - Web fonts