1.4.5 Imágenes de texto
Criterio de éxito oficial
Si las tecnologías que se utilizan pueden lograr la presentación visual deseada, se usa texto en lugar de imágenes de texto para transmitir información, excepto en los siguientes casos: personalizable (la imagen de texto puede ser visualmente personalizada según los requisitos del usuario), o esencial (una presentación concreta del texto es esencial para la información que se transmite).
¿Qué es una imagen de texto?
Una imagen de texto es cualquier imagen (PNG, JPG, GIF, SVG con rutas de texto) que contiene palabras o frases diseñadas para ser leídas. No es el texto HTML seleccionable que aparece en la página, sino texto incrustado visualmente en un archivo de imagen.
Ejemplos habituales: banners con texto estilizado, títulos de sección como imagen, botones diseñados como imagen con texto, infografías con texto explicativo.
Texto real vs imagen de texto
El texto HTML real ofrece ventajas que las imágenes no pueden igualar:
Imagen PNG con el texto incrustado
Bienvenido a nuestro portal
Texto HTML con CSS personalizado
Pixelación al ampliar
Al aumentar el zoom del navegador o el tamaño de texto del sistema, el texto real escala perfectamente mientras que las imágenes de texto se pixelan o se ven borrosas:
Imagen de texto (200% zoom)
Los píxeles se hacen visibles — borde dentado, pérdida de nitidez
Texto HTML real (200% zoom)
Renderizado por el navegador — nítido a cualquier tamaño
Cuándo se permiten imágenes de texto
El criterio admite dos excepciones legítimas:
Esencial
La presentación visual concreta del texto es imprescindible para transmitir la información. El texto como imagen es el contenido en sí mismo.
Ejemplos: logotipos, caligrafía artística, capturas de pantalla de documentos, muestras de fuentes tipográficas.
Personalizable
La imagen de texto puede ajustarse visualmente a los requisitos del usuario (tamaño, color, fuente).
Ejemplo: un sistema que permite seleccionar fuente, color y tamaño para generar la imagen a medida.
Logotipos
El texto que forma parte de un logotipo o nombre de marca no tiene requisitos de contraste ni de texto real.
Nota: aunque los logotipos están exentos, siempre deben tener texto alternativo descriptivo.
¿Por qué importa?
Las personas con dislexia o baja visión frecuentemente utilizan fuentes especiales (como OpenDyslexic) o ajustan el espaciado del texto para leer mejor. Esto solo es posible con texto HTML real.
Los usuarios con modo de alto contraste del sistema operativo no pueden beneficiarse de esta función si el texto está incrustado en imágenes. Tampoco pueden cambiar los colores.
¿Quién se ve afectado?
Dislexia
Usan fuentes especiales y espaciado personalizado que solo funcionan con texto real.
Baja visión
Amplían el texto o cambian colores — ambos imposibles con imágenes.
Multiidioma
Las herramientas de traducción automática no pueden traducir texto incrustado en imágenes.
Alto contraste
El modo de alto contraste del sistema cambia colores de texto — no puede afectar a imágenes.
Cómo implementarlo
CSS puede hacer lo mismo que una imagen de texto
/* Título estilizado con CSS puro — sin necesidad de imagen */
.hero-heading {
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(2rem, 5vw, 4rem);
background: linear-gradient(135deg, #005A9C, #003D6B);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}Sustituir un banner de imagen por texto HTML
/* ✗ Imagen de texto */
<img src="banner-titulo.png" alt="Bienvenido">
/* ✓ Texto real con CSS */
<h1 class="hero-heading">Bienvenido</h1>SVG con texto real (accesible)
/* SVG con texto real — puede ser seleccionado y leído */
<svg viewBox="0 0 200 50">
<text x="100" y="35" text-anchor="middle"
font-family="sans-serif" font-size="24"
fill="#005A9C">
Mi empresa
</text>
</svg><path d="...">) es tratado como imagen de texto. Solo el elemento <text> en SVG es texto real.
Técnicas WCAG
| Código | Tipo | Descripción |
|---|---|---|
C22 | Suficiente | Usar CSS para controlar la presentación visual del texto |
C30 | Suficiente | Usar CSS para reemplazar texto por imágenes de texto y proporcionar controles de interfaz de usuario para cambiar |
G140 | Suficiente | Separar la información y la estructura del texto de su presentación para permitir presentaciones alternativas |
PDF7 | Suficiente | Realizar reconocimiento de caracteres óptico (OCR) en un PDF no textual |