Skip to main content
Perceivable WCAG 1.4.9

1.4.9 Images of Text (No Exception)

Images of text are only used for pure decoration or where a particular presentation of text is essential.

Level AAA Moderate WCAG 2.0 (new) WCAG 2.1 WCAG 2.2

What This Rule Means

WCAG 1.4.9 is the AAA-level strictening of 1.4.5. At AA level, images of text are acceptable if they are customizable or the presentation is essential. At AAA level, the customization exception is removed — images of text may only be used when the specific visual presentation is truly essential (such as a text sample demonstrating a specific typeface) or for pure decoration.

In practical terms, this means virtually all text on the page must be rendered as HTML text styled with CSS. The only images of text permitted are logotypes and cases where the exact rendering is the information itself, like a screenshot showing a UI or a sample of historical calligraphy.

Why It Matters

This criterion pushes the web toward full text flexibility. When all text is real HTML text, users can resize it, reflow it, change fonts, adjust colors, translate it, search it, and copy it. These are fundamental interactions that images of text make impossible or degraded.

For organizations targeting AAA compliance (government services, educational institutions, healthcare portals), eliminating images of text ensures the broadest possible user accommodation.

Related axe-core Rules

No automated axe-core rules exist for 1.4.9. Like 1.4.5, this requires manual inspection to identify images that contain text and determine whether the text presentation is truly essential.

How to Test

  1. Audit all images on the page using DevTools to identify images containing text.
  2. For each image of text, ask: Is this a logotype? If yes, it is exempt.
  3. For non-logo images of text, ask: Is the specific visual presentation the actual information? If showing what a typeface looks like, it is exempt. If it is a heading or button, it fails.
  4. Verify that no functional text (headings, buttons, navigation, labels) is rendered as images.

How to Fix

Convert all remaining images of text to HTML. For complex visual effects, use modern CSS:

/* Text effects that eliminate the need for images */
.outlined-text {
  -webkit-text-stroke: 2px #333;
  color: transparent;
  font-size: 4rem;
  font-weight: 900;
}

.shadowed-text {
  text-shadow:
    3px 3px 0 #e0e0e0,
    6px 6px 0 #c0c0c0;
  font-size: 3rem;
}

.clipped-bg-text {
  background: url('/img/texture.jpg') center/cover;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 5rem;
  font-weight: 900;
}

Common Mistakes

  • Using image banners with promotional text instead of HTML overlay text on background images.
  • Rendering CTA buttons as images because of a specific font not available as a web font.
  • Screenshots of text used for testimonials or quotes instead of styled blockquotes.
  • Infographic titles and labels embedded in the image rather than as HTML overlays.
  • Confusing "essential" with "preferred" — a design preference for an image-based heading is not essential.

Resources