1.4.5 Images of Text

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

What This Means

If the same visual presentation can be achieved with real text, do not use an image of text. Real text can be resized, recolored, and read by assistive technology. Images of text become blurry when zoomed and cannot be adjusted by users who need custom fonts or spacing.

The only exceptions are logotypes (brand logos) and situations where a particular visual presentation of text is essential (such as a font sample).

Who This Affects

Users with low vision — cannot resize or recolor text baked into images
Screen reader users — images of text are invisible unless alt text is provided, and even then lose structure
Users who override fonts or colors — custom stylesheets have no effect on image text
Users on slow connections — images are heavier than text and may not load

Common Pitfalls

1. Using images for stylized headings

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

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

2. Banners with text burned into the image

<!-- Bad -->
<div class="hero">
  <img src="hero-banner.jpg" alt="50% off all items this weekend">
</div>

<!-- Good -->
<div class="hero" style="background-image: url('hero-bg.jpg')">
  <h2>50% off all items this weekend</h2>
</div>

3. Navigation items as images

<!-- Bad -->
<nav>
  <a href="/home"><img src="nav-home.png" alt="Home"></a>
  <a href="/about"><img src="nav-about.png" alt="About"></a>
</nav>

<!-- Good -->
<nav>
  <a href="/home">Home</a>
  <a href="/about">About</a>
</nav>

How to Fix

Replace image text with styled HTML text

Use CSS web fonts, gradients, text shadows, and other styling to achieve the desired visual effect with real text.

<!-- Good: styled text instead of an image -->
<h1 class="brand-heading">Acme Corp</h1>

.brand-heading {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.5rem;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Logos are exempt

<!-- OK: logos are an allowed exception -->
<img src="company-logo.png" alt="Acme Corp">

How to Test

Visually scan the page for any text rendered as an image (banners, headings, buttons, navigation items with text baked into images).
Right-click suspected images and select "Inspect" to confirm whether the text is an <img> element or real HTML text.
Zoom the browser to 200% and check if any text becomes blurry or pixelated, indicating it is an image rather than real text.
Verify that logos (which are exempt) are the only images containing text.
Pass: All text on the page is rendered as real HTML/CSS text, except for logos and brand marks.
Fail: Any non-logo text is rendered as an image that could instead be achieved with HTML and CSS.

axe-core Rules

No automated axe-core rules. This criterion requires manual testing.