Skip to main content
Perceivable WCAG 1.4.5

1.4.5 Images of Text

If the same visual presentation can be achieved with real text, images of text are not used, except for customization or essential use.

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

What This Rule Means

WCAG 1.4.5 discourages the use of images to display text when the same visual result can be achieved with styled HTML text. Images of text cannot be resized without degradation, cannot be reflowed, cannot be adjusted by user style sheets, and are not directly accessible to screen readers without alt text. The criterion allows exceptions for logotypes and situations where the specific visual presentation of the text is essential to the information being conveyed.

Modern CSS provides extensive typographic control — custom fonts via @font-face, text shadows, gradients on text, letter spacing, and more — that eliminates most reasons for using images of text. When real text is used instead, it inherits all the benefits of browser rendering: scaling, reflow, translation, search, and copy-paste.

Why It Matters

Images of text present multiple barriers. They become blurry when zoomed, they cannot be customized by users who need specific fonts or colors for readability, and they do not reflow when the viewport changes. For users with dyslexia who need to override fonts, or low-vision users who need specific color combinations, images of text are immovable obstacles.

Images of text also hurt SEO, increase page load time, and make content updates more difficult since each text change requires generating a new image.

Related axe-core Rules

There are no automated axe-core rules for 1.4.5 because detecting images of text requires human judgment to determine whether the text could be rendered as HTML text. This is a manual check criterion.

How to Test

  1. Visually scan the page for any text content rendered as images — banners, headings, buttons, navigation items.
  2. For each image of text found, determine if the same visual presentation could be achieved with CSS-styled HTML text.
  3. Check if the image of text has appropriate alt text that conveys the same information.
  4. Verify that logos and brand names (which are exempt) are the only remaining images of text.

How to Fix

Replace images of text with styled HTML. Modern CSS can replicate virtually any text effect:

/* Instead of an image for a decorative heading */
.fancy-heading {
  font-family: 'Playfair Display', serif;
  font-size: 3rem;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
}

/* Instead of an image for a styled button */
.styled-button {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: 2px solid currentColor;
  border-radius: 4px;
  padding: 0.75em 1.5em;
}

Use @font-face for custom typography instead of image-based headings:

<style>
  @font-face {
    font-family: 'BrandFont';
    src: url('/fonts/brand.woff2') format('woff2');
    font-display: swap;
  }

  .brand-heading {
    font-family: 'BrandFont', serif;
    font-size: 2.5rem;
  }
</style>

<h1 class="brand-heading">Welcome to Our Service</h1>

Common Mistakes

  • Using image files for styled headings or banner text when CSS could achieve the same effect.
  • Buttons or call-to-action elements rendered as images rather than styled HTML buttons.
  • Navigation items rendered as image maps instead of HTML text with CSS styling.
  • Social media share counts or badges rendered as images instead of live text.
  • Infographics where body text is embedded in the image instead of being overlaid as HTML text.

Resources