Goal
Avoid using images of text when real text can be used.
Success Criterion · WCAG 1.4.5
Images of Text
If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text except for customizable or essential purposes.
Level AAWCAG 2.0Perceivable1.4 · Distinguishable
Copy button ready
What to do
Use actual text instead of text embedded in images, except when the presentation is essential or the user can customize it.
Why it matters
Real text can be resized, reflowed, translated, and read by assistive technologies; images of text cannot.
Success criterion
What WCAG 1.4.5 requires
Summarized directly from the official Understanding document so teams can quote the requirement accurately.
If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text except for customizable images of text and essential images of text.
Intent
Why WCAG created this requirement
- Text in images is less adaptable: it doesn’t scale or reflow well and may blur when zoomed.
- Images of text are not reliably readable by screen readers.
- Real text supports user preferences (fonts, spacing, colors) and translation.
Benefits
Who gains when you pass
- Low vision users can zoom and still read crisp text.
- Screen reader users can access the text content programmatically.
- Users can copy/paste and translate text easily.
- Responsive layouts can reflow text naturally across devices and orientations.
- Users with dyslexia can use preferred fonts or spacing adjustments when text is real.
Why it matters
User impact when this criterion fails
Summaries drawn from the Understanding document help you socialize impact statements with product stakeholders.
Users may not be able to read text that becomes blurry when zoomed because it is embedded in an image.
Screen readers may skip or poorly announce text that is part of an image.
Users cannot adjust typography preferences when content uses images of text.
Exception guidelines
Use the WCAG 1.4.5 exceptions correctly
Document the rationale for each exception and note which alternative support you provide.
Customizable
The user can customize the text (font, size, color) in the rendered image.
Requirement
Customizable images of text may be used.
Essential
A particular presentation of text is essential to the information being conveyed (e.g., brand mark).
Requirement
Essential images of text may be used.
Overview
Whenever possible, render text as text, not as part of an image. Images of text (like banners or buttons with text burned into an image) reduce accessibility because users cannot reliably scale, reflow, translate, or select the text. Exceptions exist if the image of text is essential (like a logo) or customizable by the user.
- Use CSS for typographic styling rather than producing “designed” text as an image.
- If an image of text is used for branding, treat it as essential only when the exact appearance is required.
- If the user can customize the image of text (e.g., generated), it may satisfy the exception.
- Do not use images of text for buttons or headings when real text is feasible.
Reference: All summaries and highlights originate from Understanding WCAG 1.4.5 and the W3C quick reference.
Fast facts
- Conformance level
- Level AA
- WCAG version introduced
- WCAG 2.0
- Principle
- Perceivable
- Guideline
- 1.4 · Distinguishable
Examples
Make success tangible for teams
Share pass/fail snapshots to coach designers, engineers, QA, and content authors.
CTA button
Pass
A styled `<button>` with real text “Get started” using CSS.
Fail
A PNG button with “Get started” baked into the image.
Hero headline
Pass
Hero headline is `<h1>` text with CSS styling.
Fail
Headline is part of a background image with no text alternative.
Logo
Pass
Logo image is used as branding (essential) with appropriate alt text.
Fail
Navigation text labels are images of text used for styling reasons.
Evidence to keep
Document conformance decisions
Capture artifacts for VPATs, procurement reviews, and regression testing.
- Maintain a list of approved essential images of text (logos/marks) and rationale.
- Document design-system guidance: “never use images of text for headings/buttons.”
Official resources
Deep dives and supporting material
Keep these links handy when writing acceptance criteria or responding to audits.
Understanding 1.4.5
Official W3C interpretation, techniques, and intent for Images of Text.
Quick Reference 1.4.5
Filterable list of sufficient techniques and failures.
Technique C22
Using CSS to control visual presentation of text.
Technique G140
Separating information and structure from presentation to enable different presentations.
Failure F3
Failure due to using images of text without providing the same information as text.
Implementation checklist
Capture progress and blockers
- Audit pages for images containing text (banners, hero images, buttons, headings).
- Replace images of text with real text styled via CSS.
- For unavoidable images of text, ensure the text content is available elsewhere in real text.
- Ensure `alt` text for images of text conveys the same words and meaning (when appropriate).
- Prefer SVG with real text only if it remains selectable and accessible; otherwise use HTML text.
- Reserve images of text for true branding/essential cases and document rationale.
Testing ideas
Prove conformance with evidence
- Inspect images for embedded text; verify text is not used where HTML/CSS can achieve the design.
- Zoom to 200% and verify any remaining images of text remain readable (or have real text alternatives).
- Use a screen reader and verify the textual information is available as text content.
- Check copy/paste ability and translation workflows for key content.
Related success criteria
More from Distinguishable (1.4)
WCAG 1.4.1Use of ColorLevel AWCAG 1.4.2Audio ControlLevel AWCAG 1.4.3Contrast (Minimum)Level AAWCAG 1.4.4Resize TextLevel AAWCAG 1.4.6Contrast (Enhanced)Level AAAWCAG 1.4.7Low or No Background AudioLevel AAAWCAG 1.4.8Visual PresentationLevel AAAWCAG 1.4.9Images of Text (No Exception)Level AAAWCAG 1.4.10ReflowLevel AAWCAG 1.4.11Non-text ContrastLevel AAWCAG 1.4.12Text SpacingLevel AAWCAG 1.4.13Content on Hover or FocusLevel AA