Avoid embedding text in images

What it is

Text embedded in images places words that users must read inside a bitmap or inseparable visual asset instead of rendering them as live interface text. This turns translatable content into part of an asset, bypassing string extraction, font and layout adaptation, assistive technology, and search. Separating imagery from text is the multilingual default; “avoid” does not mean that an interface cannot use images alongside words.

Why it happens

Localization systems normally process resource keys and structured text, not words represented as pixels. Embedded copy therefore falls outside translation, terminology checks, and change tracking. Rebuilding an image for every language can create a matrix of locale, region, theme, resolution, and state variants in which one version is easily missed. A fixed canvas cannot reflow, wrap, or mirror as translation length and reading direction change. Ordinary text layers and assistive technology cannot reliably select, copy, search, speak, or independently enlarge its sentences. Some platforms can recover text with OCR or Live Text, but that inference does not replace localizable, accessible text supplied by the author.

Where it stops holding

Wordmarks, photographs of historical material, expressive lettering, and signs in real scenes may need to remain intact. Even when chart labels require a tight geometric relationship, prefer SVG text, a chart component, or a localizable label layer; maintain locale-specific assets only when authenticity or production constraints truly make image and text inseparable. In that case, distinguish words needed for visual authenticity from the only instruction needed to complete a task. The latter still requires live text or an equivalent description. Alt text can convey an image's purpose, but it does not restore layout, custom scaling, copying, or item-level navigation for a long baked-in passage.

Applying it

• Keep backgrounds and illustrations separate from labels; render headings, controls, prices, risk statements, and instructions through interface text components.
• Scan both content resources and visual assets in the localization pipeline. OCR can flag possible unextracted copy, but a person must confirm it and locate the editable source.
• When embedded text is unavoidable, maintain explicit locale variants with owners and update status, and provide equivalent live text or an appropriate alternative description.
• Review localized screens with long translations, RTL, text enlargement, high-contrast themes, and narrow viewports; also test screen-reader order, search, and copying tasks.

Related

• Same group: S1.07.1 Avoid idioms, puns, and culture-bound jokes · S1.07.2 Simple sentence structure can substantially reduce ambiguity · S1.07.3 Terminology must first be consistent in the source language
• Adjacent: S1.01 Copy expansion and resilient layouts · S1.03.3 Color emoji and image alternatives
• Search terms: baked-in text · image localization · live text overlay