1.4.5 Images of Text

WCAG 2.2 · 1.4.5 AA Perceivable

What it requires

When the same visual presentation can be made with real, styled text, you must use text rather than a picture of text (an image whose pixels spell out words). The point is that real text can be resized, recoloured, restyled, and re-rendered by the user and their assistive technology, while an image of text cannot.

There are two exceptions where an image of text is allowed:

  • Customisable — the image of text can be visually customised to the user’s requirements (for example, the user can set font, size, and colour).
  • Essential — a particular presentation of the text is essential to the information conveyed, such as logotypes (brand name as part of a logo) or a sample of a specific typeface.

  • Low-vision users who enlarge text or override fonts and colours — an image of text becomes blurry or pixelated when scaled and ignores their preferences.
  • People with dyslexia or reading disabilities who rely on a specific font, spacing, or colour combination that an image can’t adopt.
  • Screen-reader users when the image also lacks a correct text alternative, leaving the content unreadable.
  • Anyone using translation, reflow, or high-contrast modes, which act on real text but not on baked-in pixels.

How to detect it

Checks for images of text
Check How Automated?
Find pictures of words Try to select text with the cursor. If headings, buttons, or paragraphs can’t be selected, they may be images of text. No — manual judgement.
Zoom to 400% Enlarge the page. Real text stays crisp; images of text blur or pixelate. No.
Override fonts/colours Apply a user stylesheet or reader mode; image text won’t change. No.
Inspect the markup Look for <img>, CSS background-image, or SVG that renders styled text instead of using real characters. Partly — tools flag images, not whether text was avoidable.

Automated checkers such as axe cannot reliably decide whether an image contains text or whether real text was feasible, so 1.4.5 is essentially a manual criterion.

How to fix it

  1. Replace the image with real text and reproduce the look with CSS — web fonts, color, background, text-shadow, gradients, and transforms cover almost every case.
  2. For decorative banners, place styled live text over a background image rather than flattening the words into the picture.
  3. If an image of text is genuinely essential (a logo), keep it but give it an accurate alt value.
  4. Verify the result resizes, reflows, and recolours with the user’s settings.
Real, stylable text instead of a picture of text
<h2 class="hero__title">Accessibility for everyone</h2>

<style>
  .hero__title {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: clamp(2rem, 6vw, 4rem);
    color: #fff;
    background: linear-gradient(90deg, #0a4, #07c);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
</style>

Copy-paste tests

Automated coverage

There is no fully automated axe-core rule that can catch 1.4.5 violations, because a machine cannot tell whether an image contains essential text. This criterion needs manual review using the console check and steps below.

Run this in the browser console

check-images-of-text.js 
// Read-only: surface images whose alt text looks like real words,
// plus SVG <text> and CSS background-images, for manual review.
const suspects = [];
document.querySelectorAll('img[alt]').forEach(img => {
  if ((img.alt || '').trim().split(/\s+/).length >= 2) suspects.push(img);
});
document.querySelectorAll('svg text').forEach(t => suspects.push(t.closest('svg')));
document.querySelectorAll('*').forEach(el => {
  const bg = getComputedStyle(el).backgroundImage;
  if (bg && bg !== 'none') suspects.push(el);
});
suspects.forEach(el => { el.style.outline = '2px solid red'; });
console.table(suspects.map(el => ({ tag: el.tagName, alt: el.getAttribute && el.getAttribute('alt') })));
console.log('Review these for images of text:', suspects);

What to check manually: Confirm whether each flagged image actually renders meaningful text (a logo or essential image is exempt), and verify that any such text could not instead be rendered as real, stylable HTML text.