Text Inside Images: Getting Alt Text and Accessibility Right

We build a tool that puts words into images, so it would be strange not to say this plainly: the moment text becomes an image, it stops being text. It cannot be read aloud, selected, searched, translated, or resized by the person viewing it. That is a real cost, and it is worth paying deliberately rather than by accident.

What is actually lost

To software, a text image is a rectangle of coloured pixels. Nothing in the file indicates that the pixels happen to form letters. The practical consequences stack up quickly:

• Screen readers cannot read it. Software that speaks page content aloud has nothing to speak. A blind reader encounters silence, or just the word "image".
• It cannot be resized. Someone who enlarges text in their browser gets larger real text but a pixelated image. Your carefully chosen 14px caption stays 14px, then blurs.
• It cannot be selected or copied. Nobody can quote your text, paste it into a search, or copy a phone number out of it.
• Automatic translation skips it. Browser translation rewrites text on the page; your image stays in the original language.
• Search engines mostly cannot read it. Words inside images are, for practical purposes, not indexed content.
• It ignores reader preferences. High-contrast modes, dark mode, custom fonts for dyslexia — all of these adjust text and none of them touch your image.

That last point is easy to overlook and affects a large number of people. Someone who has configured their system for maximum legibility gets your styling instead of theirs, with no recourse.

Alt text: what it is for

Alt text is a text alternative attached to an image, read aloud by screen readers, displayed if the image fails to load, and used by search engines as a description of content. It is the mechanism that makes an image-based message available to people who cannot see it.

The single most useful principle: alt text should convey the same information, not describe the appearance. Ask what a sighted reader takes away from this image, then write that. If the image is a quote, the quote is the information. If it is a chart, the finding is the information — not the fact that there are bars.

The rules that actually matter

For a text image, the alt text is the text

This is the easiest case and the most commonly botched. If your image contains a quote, the alt text is that quote, plus attribution. Not "quote image", not "inspirational graphic" — the actual words. If someone would read the words on screen, a screen reader user should hear the same words.

Where a design has visual hierarchy, flatten it into a sensible reading order: a headline plus a subheading becomes one sentence containing both, in the order a sighted reader would encounter them.

Do not start with "image of"

Screen readers already announce that the element is an image. "Image of a quote saying hello" gets read as "image, image of a quote saying hello". Just write the content.

Purely decorative images get empty alt text

An image that adds no information — a divider, a texture, a purely ornamental flourish — should have an explicitly empty alt attribute. That tells assistive software to skip it silently. Omitting the attribute is different and worse: many screen readers then read out the filename, so your reader hears "I M G underscore 4 8 2 1 dot P N G".

Empty alt is a deliberate statement that there is nothing to convey. Use it confidently.

Keep it as short as the content allows

Around 125 characters is the commonly cited comfortable maximum, because some older screen readers truncate and because listening is slower than skimming. But this is a guideline, not a law: if the image genuinely contains a 200-character quote, use the whole quote. Truncating the information to satisfy a character count defeats the purpose.

If a description genuinely needs several sentences — a complex diagram, a data table — put a short alt text on the image and the full explanation in the surrounding page text where everyone benefits from it.

Describe function, not appearance, for interactive images

If an image is a link or a button, the alt text should say what it does, not what it looks like. A magnifying-glass icon that submits a search should be "Search", not "magnifying glass".

Where to put alt text on social platforms

Every major platform supports it, and almost nobody uses it. On most, you add it while composing: look for an "ALT" badge on the image thumbnail, or an "Add description" option in the image editing panel. Some platforms offer automatic captions generated by machine vision — treat these as a fallback, because they describe appearance generically and are frequently wrong about text content.

A specific note for text-heavy graphics: platforms compress uploads aggressively, so small text degrades. Alt text is what keeps the message intact when the pixels do not, which makes it useful well beyond accessibility.

When you should not use a text image at all

Alt text is a mitigation, not a cure. Sometimes the right answer is to not put the text in an image in the first place.

Body copy. Never set paragraphs of reading content as an image. Real text reflows, scales, translates and can be searched. There is no upside.

Anything actionable. Phone numbers, email addresses, URLs, addresses, coupon codes. If a reader cannot copy it, you have created work for them. Putting a phone number in an image so bots cannot scrape it also stops customers from tapping to call.

Data tables. A screenshot of a table is inaccessible and unusable. A real table can be navigated cell by cell by a screen reader.

Anything that needs to be found. If you want a page to rank for a phrase, that phrase should be in the page's real text.

Text images are the right tool when the destination cannot render text — a social feed, a video frame, a watermark, a printed label, a platform that strips formatting. That is a real and common set of needs. It just is not the same thing as "text on a web page".

Contrast and legibility

Accessibility does not stop at screen readers. Many more people have low vision or colour vision deficiency than are fully blind, and they are looking at your image.

The widely used benchmark is a contrast ratio of at least 4.5:1 between text and background for normal-size text, and 3:1 for large text — roughly 24px and above, or 19px bold. Free contrast checkers will compute this from two colour values in seconds, and the results are often surprising: mid-grey on white, and most pastel combinations, fail comfortably.

Beyond ratio: never rely on colour alone to carry meaning, keep text off busy areas of a photo (or put a solid panel behind it), and prefer a larger size in a plain weight over a small size in a decorative face. We go further into this in the typography guide and the colour theory guide.

A short checklist

One last thought

A convenient property of doing this well: the alt text you write is usually the same text you pasted into the generator. Keep your source list, and you have your alt text already — no extra work, just the small discipline of not throwing it away after exporting. If you have already lost it, our Image to Text tool can read the words back out of the image for you.