At Level AAA, the logo and brand-name carve-out from 1.4.5 is removed -- the only exceptions left are pure decoration and cases where a particular visual presentation is essential to the information.
1.4.9 Images of Text (No Exception)
In Plain Language
1.4.9 Images of Text (No Exception) is the Level AAA strict form of 1.4.5 Images of Text[1]. The baseline rule is the same: text visible on the page must be actual text characters -- rendered by the browser from HTML and styled with CSS -- not pixels baked into a bitmap. What changes at AAA is the exception list. 1.4.5 lets an image of text through if the text can be visually customized to the user's requirements, or if a particular presentation is essential (logos, brand names). 1.4.9 (Level AAA) drops the customization carve-out and the logo/brand-name carve-out, leaving only "essential" -- cases where the specific visual presentation is the information, such as a signature sample on a forgery page or a specimen in a typography lesson[2].
In practice: at AAA, even wordmarks and brand logotypes should be delivered as SVG with real <text> elements, or as HTML text styled to match the brand's typography. The practical effect is that a user with a custom font stack, high-contrast theme, increased letter spacing, or machine translation turned on gets the same treatment for your brand text as for your body copy.
Why It Matters
- Bitmap text degrades under zoom. A user who zooms to 200% or 400% to meet 1.4.4 Resize Text[3] sees real text reflow crisply; a PNG of the same text resamples into blurred pixels.
- User stylesheets, OS-level high-contrast modes, and browser reader views operate on the DOM. Text rendered as HTML picks up the user's font, color, background, and spacing overrides -- text flattened into an image does not, even with perfect
alt. - Browser translation engines walk text nodes. Text inside an
<img>is opaque to them, so a non-native reader sees the surrounding paragraph translated and the image text untouched. - Screen readers announce the
altattribute, not the image contents. Any mismatch between the bitmap and thealtstring (typos, stale banner copy after a sale ends, localized versions that were never re-exported) silently ships a different message to assistive tech than to sighted users. - The 1.4.5 AA carve-out for "customizable" images of text never actually worked in the field -- there is no common browser UI for swapping out an image asset the way a user can restyle HTML text. 1.4.9 closes that gap by refusing the carve-out entirely[2].
Examples
✔ Real text with CSS styling -- resizable, translatable, customizable
<!-- Good: real text styled with CSS -->
<div class="banner">
<h2>Spring Sale -- 40% Off</h2>
<p>All accessories through April 30</p>
</div>
<style>
.banner {
background: linear-gradient(135deg, #1e3a5f, #2d5a8e);
color: #fff;
padding: 1.5rem;
text-align: center;
}
</style>✘ Text baked into an image -- cannot be resized, translated, or customized
<!-- Bad: text baked into an image -->
<img src="sale-banner.png"
alt="Spring Sale -- 40% Off">
<!-- Even with alt text, this fails 1.4.9
because the text could be rendered as
real HTML/CSS instead of an image -->✔ Logo -- particular presentation is essential to brand identity (exception applies)
✘ Navigation text rendered as images -- no valid exception applies
<!-- Bad: navigation rendered as images -->
<nav>
<img src="nav-home.png" alt="Home">
<img src="nav-about.png" alt="About">
<img src="nav-contact.png" alt="Contact">
</nav>
<!-- Use real text links instead: -->
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>
</nav>How to Fix It
- Render text as HTML and style it with CSS. Gradients, drop shadows, outlined strokes, letter-spacing, custom line-height, and blend modes all exist in CSS. Anything a marketing banner achieves with Photoshop type effects can be reproduced on real text nodes.
- Load custom typography as a web font. If the design calls for a specific typeface, serve it via
@font-faceand apply it to the element. The characters stay in the DOM, so zoom, translation, user stylesheets, and accessible-name computation all keep working. - Convert wordmark logos to inline SVG with
<text>. At AAA the logo/brand-name exception from 1.4.5 is gone[2]. Export brand wordmarks as SVG containing real<text>elements (with the brand font embedded or referenced) rather than outlined paths or rasterized PNG. Fall back to an HTML element styled with the brand font if the wordmark is not typographically complex. - Reserve "essential" for cases where the rendering is the information. Signature samples, handwriting specimens, calligraphy lessons, historical facsimiles -- situations where changing the font would change what the content is about. A sale banner is not essential; a scan of a letter is.
- Mark decorative text-shaped images with an empty
alt. If a decorative image happens to contain letterforms that carry no meaning, usealt=""so assistive tech skips it. Do not addrole="presentation"on top ofalt=""; the emptyaltalready removes the image from the accessibility tree. - Audit existing CMS output for image-based headings and buttons. Legacy WYSIWYG flows often generate stylized heading and call-to-action images. Replace these with
<h2>,<h3>, or<button>elements styled in CSS. - Check charts and infographics. When labels are part of a chart, use SVG
<text>elements or HTML overlays positioned above the chart canvas -- not rasterized labels inside a PNG or JPEG export.
References
- [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 ↩
- [2] W3C (2023). Understanding Success Criterion 1.4.9: Images of Text (No Exception). W3C, Accessed 2026-04-07. https://www.w3.org/WAI/WCAG22/Understanding/images-of-text-no-exception.html ↩ ↩ ↩
- [3] W3C (2023). Understanding Success Criterion 1.4.4: Resize Text. W3C, Accessed 2026-04-07. https://www.w3.org/WAI/WCAG22/Understanding/resize-text.html ↩