WCAG 1.4.5 Images of Text: Use Real Text Instead of Images

What This Criterion Requires

WCAG 1.4.5 requires that if the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text. There are two exceptions: images of text that are customizable by the user, and images of text where the particular visual presentation is essential to the information being conveyed, such as a brand logotype. This criterion exists because images of text cannot be resized without degradation, cannot be customized by users who need different colors or fonts, cannot be read by screen readers in the same way as live text, and do not reflow on smaller screens. Common violations include using images for headings, banners with text baked into a background image, navigation items rendered as images, and call-to-action buttons created as image files. Modern CSS provides extensive capabilities for styling text, including custom fonts, gradients, shadows, transformations, and animations, making it rarely necessary to use images of text.

Why It Matters

Images of text create barriers for multiple groups of users. People with low vision who need to resize text find that image-based text becomes pixelated and blurry when enlarged, unlike real text that scales cleanly. Users who apply custom stylesheets to change fonts, colors, line spacing, or background colors for readability cannot modify text that is embedded in an image. Screen reader users may miss text content in images entirely if adequate alt text is not provided, or they may receive a less structured experience compared to real text with proper semantic markup. Users on slow connections or with images disabled will not see the text content at all. Search engines cannot read text in images, harming SEO. Additionally, images of text increase page weight and load times compared to styled HTML text. Using real text with CSS styling is better in virtually every measurable way: accessibility, performance, SEO, and maintainability.

Common Failures and How to Fix Them

<div class="hero">
  <img src="hero-banner-with-text.jpg" alt="Welcome to our store - 50% off everything">
</div>

<div class="hero" style="background-image: url('hero-background.jpg'); background-size: cover;">
  <div class="hero-content">
    <h1>Welcome to our store</h1>
    <p class="hero-promo">50% off everything</p>
  </div>
</div>

<nav>
  <a href="/products">
    <img src="nav-products.png" alt="Products">
  </a>
  <a href="/about">
    <img src="nav-about.png" alt="About Us">
  </a>
  <a href="/contact">
    <img src="nav-contact.png" alt="Contact">
  </a>
</nav>

<nav>
  <a href="/products" class="nav-link">Products</a>
  <a href="/about" class="nav-link">About Us</a>
  <a href="/contact" class="nav-link">Contact</a>
</nav>
<style>
.nav-link {
  font-family: 'Brand Font', sans-serif;
  font-size: 1rem;
  text-decoration: none;
  color: #1a1a2e;
  padding: 0.5rem 1rem;
}
</style>

How to Test

1. Visually scan the page for any text that appears to be rendered as an image, particularly headings, banners, buttons, and navigation elements.
2. Try to select text with your cursor; if text cannot be selected, it may be an image of text.
3. Zoom the browser to 200% and check if any text becomes pixelated or blurry, which indicates it is image-based.
4. Inspect the page source for img elements or CSS background images that contain readable text rather than using HTML text with CSS styling.

CMS-Specific Guidance

This criterion commonly causes issues on these platforms:

• Wordpress Accessibility Checklist
• Shopify Accessibility Checklist
• Squarespace Accessibility Checklist
• Wix Accessibility Checklist
• Webflow Accessibility Checklist
• Weebly Accessibility Checklist

Further Reading

• Alt Text Guide
• Wcag Explained Plain English
• Color Contrast Guide

Related WCAG Criteria

• WCAG 1.1.1
• WCAG 1.4.4