WCAG 1.4.5 Images of Text: When to Use Text Instead of Images

What WCAG 1.4.5 means for images of text

WCAG 1.4.5 is the Web Content Accessibility Guidelines success criterion that says, whenever the technology allows, use real text rather than an image of text. The goal is simple. Real text scales, reflows, is readable by screen readers, and can be customised by users. Images of text should only remain when there is a justified exception.

Why images of text are a problem

• Images do not scale like live text, so magnification or zoom can make them blurry or clipped.
• Screen readers and other assistive technology cannot read text that is part of an image.
• Users who change fonts, sizes or line spacing cannot apply their preferences to image text.
• Low contrast or compression artefacts in an image can make text unreadable.

When images of text are allowed (common exceptions)

WCAG allows images of text in limited situations. Use an image of text only when one of these applies.

• Logotypes: Brand names or logos where the presentation of the name is part of the brand.
• Essential presentation: The exact visual presentation is required and cannot be reproduced with web fonts, CSS or SVG text. This is rare and must be justified.
• Decorative images: If the image is purely decorative and does not convey information, it can be an image rather than live text.

Decision checklist: should this be live text or an image?

1. Is the content purely decorative? If yes, treat as decorative and provide no accessible name.
2. Is it a brand logo where the visual style is an identifier? If yes, an image of the logo is acceptable.
3. Can the desired look be achieved with web fonts, CSS, or SVG text? If yes, use live text.
4. Does the image convey information users need? If yes, provide live text or a text equivalent.

How to replace images of text: practical methods

When the decision is to use real text, these options work in most situations.

• Use standard HTML text for headings, labels and body copy. Let users resize and reflow it.
• Use web fonts (for example from a font provider) so you can match a brand face without images.
• Use SVG with text elements rather than converting text to outlines. SVG text remains selectable and readable by assistive tech when used correctly.
• Use icon fonts or accessible inline SVG for single characters or symbols, paired with accessible names for controls.

If you must use an image of text, make it as accessible as possible

• Provide an alt attribute that matches the text exactly when the image is informative.
• When the image is a functional control, ensure the accessible name is the same as the visible text (use alt, aria-label or accompanying visible text).
• Prefer vector formats (SVG) over raster (PNG, JPG) for sharper scaling.
• Keep text contrast high and avoid small font sizes in images.

Testing checklist for WCAG 1.4.5 compliance

• Zoom text to 200% and confirm text remains readable and not clipped. This checks relation with resize rules.
• Turn off custom fonts in your browser and confirm the content remains readable with fallback fonts.
• Use a screen reader to verify informative image text is provided via alt or accessible name.
• Check keyboard access for controls that use images of text. The accessible name must match the visible label.
• Inspect images to confirm decorative images are marked as decorative and not announced to assistive tech.

Common mistakes to avoid

• Using a background image for banner text without providing real text in the DOM. That makes the text invisible to assistive tech.
• Relying on low-resolution raster images for headings or buttons. They blur when zoomed.
• Placing important copy inside images and not providing an exact textual alternative.
• Using off-screen or hidden text as the only accessible label for decorative images. Hidden text can cause confusion for keyboard and screen reader users if not implemented properly.

Practical examples

• Banner headline: use an HTML h2 with a web font and CSS letter spacing instead of a banner image.
• Call to action button: use live text styled with CSS. If you use an image, ensure the alt or accessible name exactly matches the visible label.
• Company logo: use an image if the visual styling is essential. Provide an alt that names the organisation and avoid redundant text near the logo.

Where WCAG 1.4.5 fits with other rules

WCAG 1.4.5 sits alongside other accessibility requirements such as text contrast and text resize. Replacing images of text with live text supports those requirements because live text can be resized, restyled and read by assistive technology.

Final practical checklist before release

• Convert headings, buttons and body copy to live text where possible.
• Use SVG text when you need fine typographic control but still need accessibility.
• Keep logos as images only when the design truly requires it and provide clear alt text.
• Run manual tests with a screen reader and zoom to ensure the user experience is preserved.

If you follow this guidance you will meet the intent of WCAG 1.4.5 and provide a more flexible, usable site for people who need customised text settings or assistive tools.