Level AA

Bitmap text does not reflow, cannot inherit user font or color overrides, and pixelates under browser zoom -- failures that compound with 1.4.4 Resize Text and 1.4.12 Text Spacing.

1.4.5 Images of Text

In Plain Language

1.4.5 Images of Text (Level AA) says that when a technology can render the visual presentation as real text, the page must use real text characters rather than a bitmap image of text[1]. "Real text" means characters in the DOM that the user agent rasterises at render time -- text the browser can reflow, restyle, and expose to assistive technology.

The criterion carves out two exceptions. First, essential -- where a particular visual presentation carries the information, which the W3C Understanding document explicitly extends to logotypes (text that is part of a logo or brand name)[1]. Second, customizable -- where the image of text can be visually adjusted by the user to the same degree as real text would be. In practice almost nothing on the web satisfies the customizable exception, so the rule reduces to: real text everywhere except logos and a narrow band of typographically essential content.

Why It Matters

  • Bitmap text does not reflow. Browser zoom resamples the raster, so anti-aliased glyphs become visibly pixelated well before the 200% target that 1.4.4 Resize Text expects, and subpixel hinting is lost entirely.
  • Images of text cannot inherit user style overrides. Custom stylesheets, high-contrast modes, and dyslexia-friendly fonts apply to DOM text nodes; they have no handle on pixels inside a PNG or JPEG, which breaks the guarantees 1.4.12 Text Spacing depends on.
  • The only screen-reader path into an image of text is an `alt` attribute, which is maintained by hand and drifts out of sync with the image whenever the design updates. Real text cannot drift from itself.
  • Selection, copy, find-in-page, and browser translation all operate on DOM text. Bitmap text is opaque to every one of them, so a user who needs to translate the page or quote a headline has no mechanism to do so.
  • Rasterised text is heavier on the wire than the HTML and CSS that would reproduce it, and each size variant is a separate asset, which compounds the cost on responsive layouts.
  • 1.4.5 is Level AA, so it is in scope for Section 508, EN 301 549, and the ADA Title II conformance target. Do not confuse it with 1.4.9 Images of Text (No Exception), which is Level AAA and removes the logotype carve-out entirely -- 1.4.9 is a stricter sibling, not a replacement.

Examples

Do: Styled text using CSS

✔ Real text styled with CSS -- resizable, translatable, and screen-reader friendly.

<div class="banner">
  <h2>Summer Sale</h2>
  <p>Save 30% on all plans through August</p>
</div>

.banner {
  background: linear-gradient(135deg, #1e2a32, #2d4a5c);
  color: #fff;
  padding: 1.5rem;
  border-radius: 8px;
  text-align: center;
}
Don't: Text baked into an image

✘ Image of text -- cannot resize, restyle, or translate. Pixelates when zoomed.

<!-- FAILS: text is an image, not real HTML text -->
<img src="summer-sale-banner.png"
     alt="Summer Sale - Save 30%">

<!-- Cannot resize without pixelation -->
<!-- Cannot be restyled by user preferences -->
<!-- Alt text may drift from visual content -->
Do: Decorative heading with CSS effects

Our Mission

✔ Gradient text effect achieved with CSS -- still real, selectable, resizable text.

Don't: Navigation links as images
HomeProductsContact

✘ Navigation as images of text -- cannot resize, restyle, or use keyboard focus styles.

How to Fix It

  1. Move the headline out of the image. The dominant failure pattern is a hero or promo banner where the headline has been composited into a JPEG or PNG alongside the background artwork. Split the two: keep the photo or gradient as a `background-image`, and render the headline as an `<h1>` or `<h2>` positioned over it with CSS.
  2. Rebuild the typography in CSS. Gradients (`background-clip: text`), shadows, letter-spacing, outlines, and multi-line layout are all CSS features. Anything a designer would reach for Photoshop to do to a wordmark can be done to a DOM text node, and the result remains real text to the browser.
  3. Use `@font-face` for branded typefaces. If the design depends on a specific licensed font, self-host it via `@font-face` (or load from a web-font service) and apply it to the element. The font file is cached once and reused across every headline, which is lighter than one PNG per headline.
  4. When the glyph shape itself is the point, use SVG `<text>`. Diagrams, custom wordmarks, and typographic illustrations can be authored as SVG with real `<text>` elements -- the vector output scales without pixelation and the text remains accessible to screen readers and find-in-page, unlike a rasterised equivalent.
  5. Leave logotypes alone. The Understanding document treats text that is part of a logo or brand name as essential[1], so the company wordmark in the header is exempt. Give it an accessible name via `alt` (for `<img>`) or an `aria-label` on the SVG, and move on.
  6. Verify with browser zoom at 200% and a custom stylesheet. Real text reflows and restyles cleanly; rasterised text pixelates and ignores the override. Both checks take seconds and catch the regression before it ships.

References

  1. [1] W3C (2023). Understanding Success Criterion 1.4.5: Images of Text. W3C, Accessed 2026-04-07. https://www.w3.org/WAI/WCAG22/Understanding/images-of-text.html ↩ ↩ ↩