Perceivable · 1.4 Distinguishable
If the technology in use can achieve the visual presentation, information must be conveyed with real text rather than images of text. Exceptions are images of text the user can customize and cases where the presentation is essential, such as logos.
Live demo
The same task, done two ways: switch between the version that passes and the one that fails, or put them side by side. Everything in the box is live, so try it with a keyboard, a pointer or a screen reader.
Switch to Fails, zoom to 300% and try “Use my own font”. Then try to select the words in each version.
The tools follow the version you last used.
What happened
Why it passes
The banner is real text styled with CSS. It stays sharp at any zoom, changes to your own font, and you can select and copy it.
Why it fails
The heading, the terms and the button label are pictures of text. Zoomed in, they blur, your own font cannot reach them, and you cannot select the words.
Examples
Five examples, each one running: the usual ways this criterion fails, and code that passes. Listen to them, measure them, or copy the code.
Fails
Live preview
<a href="/sale"> <img src="summer-sale-banner.png" alt="Summer sale: 30% off all tents. Ends Sunday."></a>The offer and its end date are pixels. The alt text helps screen reader users, but people who enlarge, recolor or respace text cannot change the picture.
Passes
Live preview
<a class="sale-banner" href="/sale"> <span class="sale-title">Summer sale: 30% off all tents</span> <span class="sale-terms">Ends Sunday.</span></a>Real text styled with CSS can look the same as the picture, and it zooms cleanly, reflows and takes the reader's own font and colors (technique C22).
Fails
Live preview
<button type="submit" class="checkout"> <img src="btn-go-to-checkout.png" alt="Go to checkout"></button>The label is a picture of styled text. CSS could produce the same look, so the image of text is not needed and fails.
Passes
Live preview
.checkout { padding: 0.75em 1.5em; border: 0; border-radius: 999px; font: 700 1.125rem/1 "Oswald", sans-serif; letter-spacing: 0.04em; text-transform: uppercase; color: #ffffff; background-color: #1e40af;}The button now holds the real words “Go to checkout”, and CSS with a web font gives it the capitals and colors the image had. White on #1e40af is 8.72:1.
Passes
Live preview
<a href="/" class="site-logo"> <img src="northwind-logo.svg" alt="Northwind Outdoor home"></a>Text that is part of a logo or brand name is exempt, because its exact look is essential.
Why it matters
People with low vision or reading disabilities can resize, recolor, respace and reflow real text to suit their needs, which images of text do not allow.
W3C: Understanding 1.4.5Level AA
Level AA is the level most laws and policies require.
Where it is required
Required where the law names WCAG 2.0 or later at this level: the United States, Canada, the European Union, the United Kingdom, France, Germany, Italy, Spain, the Netherlands, Ireland, Norway, Switzerland, India, Japan, Australia, New Zealand and Israel.
How to test
A few concrete steps. Automated tools find some failures; most need a person.
Common failures