1.4.9 Imágenes de texto (sin excepción)
Criterio de éxito oficial
Las imágenes de texto solo se utilizan con fines puramente decorativos o cuando una presentación concreta del texto es esencial para la información que se transmite.
¿Qué lo diferencia del nivel AA?
El criterio 1.4.5 (AA) permite imágenes de texto cuando son personalizables (el usuario puede elegir fuente, tamaño y color de la imagen) o cuando son esenciales. El criterio 1.4.9 (AAA) elimina la excepción de personalizable.
En nivel AAA, solo queda una excepción: que la presentación visual concreta sea esencial para la información. Esto cubre logotipos y casos donde el aspecto visual del texto es el propio contenido.
Comparativa: 1.4.5 (AA) vs 1.4.9 (AAA)
Dos excepciones permitidas
Solo una excepción
Embudo de estrictez
La progresión desde sin restricciones hasta AAA:
¿Qué se considera esencial?
La excepción de «esencial» se aplica cuando cambiar el aspecto visual del texto cambiaría la información que transmite. El aspecto visual es parte del contenido:
NO esencial — usar texto HTML
- Banner de bienvenida con fuente bonita
- Títulos de sección con tipografía decorativa
- Botones con texto en imagen para estilo
- Texto de marketing con gradiente
- Encabezados con sombra o efectos visuales
Sí esencial — imagen de texto permitida
- Logotipos con texto (la tipografía ES la marca)
- Muestra de una fuente tipográfica (el texto muestra esa fuente)
- Imagen de firma manuscrita
- Captura de pantalla de documento original
- Caligrafía artística donde el trazo es el mensaje
¿Por qué importa el nivel AAA?
La excepción de «personalizable» del nivel AA es en la práctica difícil de implementar correctamente — requiere que el sistema genere imágenes a medida según preferencias del usuario. En la práctica, casi nunca se implementa. El nivel AAA reconoce esto y simplemente exige texto HTML real.
Alcanzar este criterio es razonable para la mayoría de sitios, ya que CSS moderno puede reproducir prácticamente cualquier efecto visual que antes requería imágenes.
¿Quién se ve afectado?
Dislexia
Usan extensiones que cambian la fuente a OpenDyslexic — solo funciona con texto HTML real.
Alto contraste
El modo de alto contraste del sistema reemplaza colores del texto — imposible con imágenes.
Tamaño de fuente
Usuarios con preferencias de fuente grande en el sistema no se benefician de imágenes.
Traducción automática
Las extensiones de traducción del navegador no pueden traducir texto incrustado en imágenes.
Cómo implementarlo
La misma guía que para 1.4.5, pero sin la opción de la excepción personalizable. Para cualquier texto que no sea un logotipo o caligrafía esencial, usa CSS:
Efectos visuales complejos sin imágenes
/* ✓ Gradiente en texto con CSS */
.hero-title {
background: linear-gradient(135deg, #005A9C 0%, #003D6B 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-family: 'Playfair Display', serif;
font-size: clamp(2.5rem, 5vw, 4rem);
}
/* ✓ Sombra y efectos 3D */
.title-3d {
text-shadow: 2px 2px 0 #003D6B, 4px 4px 0 rgba(0,61,107,.3);
font-weight: 900;
}
/* ✓ Fuente especial con @font-face */
@font-face {
font-family: 'MiMarcaFont';
src: url('/fonts/marca.woff2') format('woff2');
}Auditoría: identificar imágenes de texto
/* En DevTools, busca imágenes con alt que suene a texto: */
document.querySelectorAll('img').forEach(img => {
if (img.alt && img.alt.length > 3) {
console.log('Posible imagen de texto:', img.src, '| alt:', img.alt);
}
});
/* También busca background-image en elementos con texto vacío */Técnicas WCAG
| Código | Tipo | Descripción |
|---|---|---|
C22 | Suficiente | Usar CSS para controlar la presentación visual del texto |
G140 | Suficiente | Separar la información y la estructura del texto de su presentación |
C6 | Suficiente | Posicionamiento del contenido basado en marcado estructural |