What does WCAG 1.4.5 require?

1.4.5 Images of Text (Level AA) says that where the same visual presentation can be achieved with real text, you should use text rather than an image of text. Logos and essential branding are exempt, but banners, headlines and button text are not.

Can this tool read text inside images?

No. Client-side OCR is out of scope, so the detector pattern-matches on filenames, class names and alt text to surface likely candidates. Every flag must be confirmed by looking at the actual image.

Why are background-image text graphics worse?

A CSS background image can never carry alt text, so any text baked into it is completely invisible to assistive technology and is not selectable, translatable or zoomable as text. The detector flags these specifically.

A pure logo or brand name is exempt under 1.4.5. The risk is a logo that includes a tagline or strapline as rendered text — the detector notes logos so you can check for that case.

No. All parsing and pattern-matching happen in your browser. Nothing is sent to a server, so you can audit internal markup safely.

Images-of-Text Detector

Text baked into an image cannot be resized cleanly, recoloured for contrast, selected, translated, or read by a screen reader from the pixels alone. WCAG 1.4.5 Images of Text asks you to use real text wherever the same visual result is achievable with markup and CSS. This detector parses your HTML and surfaces the <img> and CSS background-image elements that most likely encode text, so you can review and replace them.

How it works

True detection would require optical character recognition, which is out of scope client-side. Instead the tool uses the strong naming and metadata signals that real codebases leave behind:

Filename patterns — sources whose file name contains tokens like banner, headline, tagline, cta, button, price, promo, quote or infographic are flagged as high confidence.
Class patterns — the same tokens appearing in class attributes raise a flag.
Alt text shape — when an <img alt> reads like a phrase or sentence (six or more words, or sentence punctuation), the image probably renders exactly that text.
Background images — inline background-image: url(...) declarations are checked too, and flagged with extra emphasis because background images can never carry alt text.
Logos and SVGs — logos are noted (check for an embedded tagline), and SVGs are noted because they may hold real selectable <text> rather than outlined paths.

Example

The bundled example includes logo-with-tagline.png, a spring-sale-banner.jpg with a long sentence as alt text, and a headline.png set as a CSS background. All three are flagged for review, while a plain photo of a team (team.jpg) and an empty-alt cart icon are left alone.

Tips

Replace banner and headline images with styled HTML text — it scales, recolours for dark mode, and reads correctly to every user.
If an image of text is genuinely unavoidable, give it alt text that contains the exact words shown.
Move any text out of CSS background images; that text is invisible to assistive tech and to translation tools.
This is a candidate-surfacing aid, not a verdict — confirm each flag by eye. All processing is local to your browser.