Goal
Avoid using images of text unless necessary. Text should be real, selectable, and resizable to support users with low vision, screen readers, or those who need to change text size or color.
Key Points
- Prefer real text with CSS styling over images.
- Images of text are only acceptable when:
- Text is essential for branding (e.g., logos).
- The font or design cannot be reproduced with CSS.
- Ensure contrast and accessibility for any text used in images.
Short Summary
Text as images can’t be resized, styled, or read by assistive technology. Use HTML text whenever possible, and reserve image text only for logos or decorative purposes.
Example Issues and Fixes
Issue Example – Heading as Image
Fail
<div class="flex w-full flex-col gap-8 p-8">
<img src="https://webcontentaccessibility.com/wp-content/uploads/2025/10/Welcome-To-Our-Website.png" alt="Welcome To Our Website"/>
</div>
Pass
<div class="flex w-full flex-col gap-8 p-8">
<h1 class="text-6xl !font-bold whitespace-nowrap !font-primary">
Welcome To Our Website
</h1>
</div>
Welcome To Our Website
Quick Checklist
- Is the text rendered as HTML, not an image?
- Is image text only used for logos or essential design?
- Is alt text provided if images contain text?
- Can text be resized and styled for readability?