WCAG 1.4.5 Images of Text (Level AA)

This page demonstrates the proper use of text versus images of text, following WCAG 1.4.5 guidelines.

Goal: Users can adjust how text is presented.
What to do: Use text instead of pictures of text.
Why it's important: People cannot alter how text looks in images.

General Principle

If the same visual presentation can be made using text alone, an image should not be used to present that text. This ensures that text remains:

Customizable by users
Searchable
Selectable
Translatable
Compatible with assistive technologies

Poor Implementation Examples

Company Name as Image

Why this fails:

Text cannot be customized by users
Content is not searchable
Requires additional bandwidth
May appear pixelated when scaled

Quote as Image

Success is not final, failure is not fatal: it is the courage to continue that counts

Text cannot be selected or copied
Cannot be translated
Font size cannot be adjusted
Poor accessibility for screen readers

Good Implementation Examples

Styled Text Instead of Image

Company Name

Why this works:

Uses CSS for styling
Text remains selectable
Can be read by screen readers
Scales perfectly at any size

Styled Quote

"Success is not final, failure is not fatal: it is the courage to continue that counts"
Winston Churchill

Fully accessible text
Can be selected and copied
Proper semantic markup
Maintains visual appeal

Essential Exceptions

Logotypes

Brand logos with specific text styling are considered essential and are exempt from this requirement:

Why this is allowed:

Part of brand identity
Specific visual representation required
Legal or trademark requirements

Signatures

Digital signatures or handwritten content may be presented as images:

Represents authentic handwriting
Cannot be replicated with text alone
Serves as verification

Customizable Text Example

Interactive Text Customization

Font Size: Line Height: Text Color:

This is an example of customizable text that allows users to adjust various properties to meet their needs. Unlike images of text, this content can be modified to improve readability and accessibility.

Try adjusting the controls above to see how the text can be customized to your preferences.

Best Practices Summary

Use actual text with CSS styling instead of images of text
Reserve images of text for logos and essential cases only
Ensure text remains customizable for user preferences
Consider responsive design implications
Test with different font sizes and screen sizes
Provide proper alt text when images of text are necessary