Requires real text instead of images of text to present information, except where the text can be customized or the image is essential, such as a logotype.
Text in an image cannot be enlarged without becoming blurry, cannot change color to suit a user's contrast needs, cannot be translated, selected or searched, and does not reflow. For people with low vision it is one of the biggest barriers.
This criterion requires that if the technologies in use can produce the visual presentation, real text is used to convey information instead of images of text. There are two exceptions: images of text that can be customized by the user, and images of text that are essential, such as a logotype.
People with low vision, who cannot enlarge an image of text without losing sharpness. People with dyslexia or other reading differences who change the font or the color. People who use high contrast modes, translation tools or text-to-speech. Everyone who wants to search, copy or select text.
The European Accessibility Act (Directive (EU) 2019/882) applies to in-scope products and services placed on the market after 28 June 2025. Recital 47 names four principles for websites and mobile applications: perceivable, operable, understandable and robust. Real text is part of "perceivable" and "robust".
The technical counterpart is the standard EN 301 549, which incorporates WCAG 1.4.5 by reference and turns it into separate clauses for each kind of ICT.
| Clause | Type of ICT | What it requires |
|---|---|---|
| 9.1.4.5 | Web pages | Web content must satisfy WCAG success criterion 1.4.5. |
| 11.1.4.5 | Non-web software (native mobile apps) | Software must use real text instead of images of text, except where essential. |
Whether and how the criterion applies to non-web documents is stated in clause 10 of the standard. Clause numbers follow the "9. + WCAG number" pattern of EN 301 549. In V3.2.1 the software clause is divided into further subclauses for open and closed functionality. Check the exact numbers in the standard when you cite them.
Standard version: EN 301 549 V4.1.1 (September 2026) is based on WCAG 2.2 and is the first version prepared specifically for the EAA. It has not yet been cited in the Official Journal of the European Union, so for now it is best treated as a voluntary technical route to the EAA's requirements. Once cited, it will give a presumption of conformity. The text of criterion 1.4.5 is the same in WCAG 2.1 and 2.2. It is a Level AA criterion.
A note on EAA scope: Article 2(4) of the Directive excludes certain content from the requirements, for example office file formats published before 28 June 2025 and archives that are not updated after that date. Content you publish or change after that date is not covered by these exclusions.
Directive (EU) 2019/882, EUR-Lex, opens in a new tab
Text in a banner image is blurry when enlarged and cannot be translated. Use a background image and real text on top of it.
TR<img src="spring-sale-banner.png" alt="Spring sale, 20% off"><div class="banner">
<h2>Spring sale</h2>
<p>20% off until Friday</p>
</div>
.banner {
background: url("spring-bg.jpg") center / cover;
color: #ffffff;
}A heading in an image is not a heading for a screen reader.
<img src="about-us-title.png" alt="About us"><h1>About us</h1>A button should be text, so it can be enlarged and recolored.
<a href="/buy"><img src="buy-now-button.png" alt="Buy now"></a><a class="btn" href="/buy">Buy now</a>
.btn {
background: #2e7d32;
color: #ffffff;
padding: 12px 20px;
border-radius: 8px;
}Use web fonts, not images, to get a particular typeface.
<img src="tagline-fancy-font.png" alt="Accessibility for everyone">@font-face {
font-family: "BrandSans";
src: url("brand-sans.woff2") format("woff2");
font-display: swap;
}
.tagline { font-family: "BrandSans", sans-serif; }Shadows, gradients and outlines can be done with CSS, and decorative shapes with SVG, while the text stays real.
<img src="title-with-shadow.png" alt="Summer">.title {
font-size: 3rem;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}A logotype can remain an image. Give it the brand name as its alternative text.
<img src="logo.png" alt="logo"><img src="logo.png" alt="Corpowid">The same rule applies in native mobile apps. Use text views with custom fonts instead of images that contain text, so the text follows the system text size.
import SwiftUI
struct PromoHeader: View {
var body: some View {
// Avoid: an image that contains the text
// Image("promo-banner")
// Use real text, with a custom font that scales
VStack(alignment: .leading, spacing: 4) {
Text("Spring sale")
.font(.custom("BrandSans-Bold", size: 28, relativeTo: .title))
Text("20% off until Friday")
.font(.body)
}
.padding()
.background(Color("PromoBackground"))
}
}import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.Font
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.unit.dp
val BrandSans = FontFamily(Font(R.font.brand_sans_bold)) // Your font resource
@Composable
fun PromoHeader() {
// Avoid: an Image that contains the text
Column(
modifier = Modifier
.background(Color(0xFF2E7D32))
.padding(16.dp)
) {
Text(
text = "Spring sale",
fontFamily = BrandSans,
style = MaterialTheme.typography.headlineSmall,
color = Color.White
)
Text("20% off until Friday", color = Color.White)
}
}img elements, CSS backgrounds and SVG images carry text? Is the text duplicated in the alternative?Corpowid has been recognized by Gartner, a leading global research and advisory firm, for our innovation and performance in digital accessibility. These badges reflect our commitment to creating inclusive, AI-powered web experiences.
