1.4.8 Presentación visual
Criterio de éxito oficial
Para la presentación visual de bloques de texto, existe un mecanismo para lograr lo siguiente: los colores de primer plano y de fondo pueden ser elegidos por el usuario; el ancho no supera 80 caracteres o glifos (40 para idiomas CJK); el texto no está justificado (alineado a ambos márgenes); el espaciado entre líneas es al menos 1,5 veces el tamaño de la fuente y el espaciado entre párrafos es al menos 1,5 veces mayor que el interlineado; el texto puede redimensionarse hasta un 200% sin tecnología asistida sin que el usuario tenga que desplazarse horizontalmente.
¿Qué es este criterio?
Este criterio define cómo deben poder presentarse los bloques de texto (párrafos largos, artículos, contenido de lectura) para ser accesibles a personas con dislexia, baja visión o dificultades cognitivas.
A diferencia de otros criterios, no exige que la presentación sea así por defecto. Lo que requiere es que el usuario tenga un mecanismo para conseguir esa presentación — ya sea mediante CSS del usuario, controles en la página, o porque el CSS ya lo hace por defecto.
Los 5 requisitos
Colores elegibles por el usuario
El usuario puede cambiar los colores de texto y fondo. El diseño no debe usar técnicas que bloqueen la hoja de estilos del usuario.
color y background-color no anulados con !important en inline stylesAncho máximo de 80 caracteres
Las líneas de texto no superan 80 caracteres (40 para CJK: chino, japonés, coreano). Las líneas largas dificultan el seguimiento del texto.
max-width: 65ch (aprox. 80 caracteres con fuente proporcional)Sin justificación bilateral
El texto no está justificado en ambos márgenes. La justificación crea «ríos de espacio» que dificultan la lectura en personas con dislexia.
text-align: left (no text-align: justify)Interlineado mínimo 1,5× y espacio entre párrafos
El espacio entre líneas es al menos 1,5 veces el tamaño de fuente, y el espacio entre párrafos es al menos 1,5 veces el interlineado.
line-height: 1.5 · margin-bottom: 2.25em (≥1.5 × 1.5em)Redimensionable al 200% sin scroll horizontal
Al ampliar el texto al 200%, no aparece scroll horizontal. El contenido fluye en la ventana disponible.
Idéntico al 1.4.4 — usar unidades relativas y layouts fluidosAlineación: el problema del texto justificado
✗ Justificado (problema)
El texto justificado crea espacios irregulares entre palabras que forman «ríos visuales» difíciles de seguir para personas con dislexia.
~ Centrado (larga lectura)
El texto centrado también es problemático en párrafos largos: el inicio de línea variable exige más trabajo cognitivo al lector.
✓ Alineado a la izquierda
El texto alineado a la izquierda tiene un margen izquierdo predecible que ayuda al seguimiento de líneas y es más legible para personas con dislexia.
Ancho de columna de texto
Las líneas de texto excesivamente largas obligan al ojo a desplazarse mucho horizontalmente y dificultan encontrar el inicio de la siguiente línea:
Comparativa de ancho de línea
Esta línea de texto no tiene límite de ancho y puede extenderse hasta ocupar toda la pantalla, haciendo muy difícil encontrar el inicio de la siguiente línea una vez terminada esta. Los ojos tienen que recorrer una distancia muy larga.
Este texto tiene un límite de ancho de 65ch (aproximadamente 80 caracteres). La longitud de línea es cómoda y facilita el salto a la siguiente línea sin perder el hilo.
Interlineado y espacio entre párrafos
✗ Interlineado insuficiente
Primera línea del texto. El interlineado muy compacto hace que las letras con ascendentes y descendentes (h, g, y, p) se toquen visualmente.
Segundo párrafo. Sin espacio extra, resulta difícil saber dónde termina un párrafo y dónde empieza el siguiente.
line-height: 1.1 — falla✓ Interlineado correcto
Primera línea del texto. El interlineado de 1,5 proporciona espacio suficiente entre líneas para que el texto sea cómodo de leer.
Segundo párrafo. El espacio extra entre párrafos (≥1,5× el interlineado) hace claramente visible la separación.
line-height: 1.5 · margin: 2.25em ✓¿Por qué importa?
Las personas con dislexia tienen dificultades para mantener el seguimiento de línea en bloques de texto. El interlineado suficiente, las líneas cortas y la alineación izquierda reducen significativamente el esfuerzo cognitivo necesario para leer.
Aunque este criterio es AAA, muchos de sus requisitos son fáciles de implementar y tienen impacto positivo en la experiencia de lectura general, no solo en usuarios con necesidades específicas.
¿Quién se ve afectado?
Dislexia
El espacio entre líneas, el ancho de columna y la no-justificación mejoran notablemente la legibilidad.
Baja visión
Necesitan poder cambiar colores y ampliar texto sin romper el layout.
Dificultades cognitivas
La presentación clara y el espacio visual reducen la carga cognitiva de lectura.
Sensibilidad visual
Poder cambiar colores permite reducir el contraste si la pantalla brillante causa molestias visuales.
Cómo implementarlo
/* CSS base para cumplir los 5 requisitos de 1.4.8 */
.content-block { /* bloque de texto principal */
/* Requisito 2: ancho máximo ~80 caracteres */
max-width: 65ch;
/* Requisito 4: interlineado ≥ 1.5 */
line-height: 1.6;
}
.content-block p {
/* Requisito 3: sin justificación */
text-align: left;
/* Requisito 4: espacio entre párrafos ≥ 1.5 × line-height */
margin-bottom: 2.4em;
}
/* Requisito 1: no bloquear colores del usuario */
/* Evitar: color: red !important en estilos inline */
/* Requisito 5: se hereda de usar unidades relativas (1.4.4) */Técnicas WCAG
| Código | Tipo | Descripción |
|---|---|---|
C19 | Suficiente | Especificar la alineación del texto en CSS |
C20 | Suficiente | Usar unidades relativas para establecer el ancho de columna para que las líneas puedan tener un promedio de 80 caracteres |
C21 | Suficiente | Especificar el espaciado de línea en CSS |
G172 | Suficiente | Proporcionar un mecanismo para eliminar la justificación del texto completo |
G169 | Suficiente | Alinear texto en un solo lado |