WCAG 1.4.8: Presentación visual

Qué Significa Esta Regla

El Criterio de Éxito 1.4.8 de las WCAG, titulado Presentación visual, se encuentra en el Nivel AAA bajo el principio de Perceptible. Se aplica específicamente a bloques de texto, es decir, pasajes sustanciales de contenido legible, no palabras sueltas, etiquetas o frases cortas. El criterio establece cinco requisitos distintos que deben cumplirse todos simultáneamente para aprobar por completo.

En primer lugar, los colores de primer plano y de fondo deben ser seleccionables por la persona usuaria. La página debe evitar especificar ambos colores a la vez (dejando al menos uno al valor predeterminado del navegador) o proporcionar un mecanismo que permita a las personas elegir su propia combinación de colores. Forzar una combinación de colores fija —incluso una de alto contraste— puede ser perjudicial para lectores con afecciones como el síndrome de Irlen o fotosensibilidad que necesitan tonos específicos.

En segundo lugar, el ancho de los bloques de texto no debe exceder los 80 caracteres (o 40 caracteres para escrituras CJK —chino, japonés y coreano—). Este límite se calcula por línea de texto renderizado, no por el ancho del elemento. Una columna de 1200 px de ancho que contenga líneas cortas debido a un tamaño de fuente grande puede seguir aprobando, mientras que una columna estrecha con texto muy pequeño y cadenas largas sin cortes puede fallar.

En tercer lugar, el texto no debe estar justificado completamente (es decir, alineado simultáneamente a los márgenes izquierdo y derecho). La justificación completa crea espacios irregulares entre palabras —a veces llamados “ríos” de espacio en blanco— que interrumpen la fluidez de lectura para personas con dislexia u otras diferencias de lectura. El texto alineado a la izquierda (bandera derecha) siempre es aceptable; el texto centrado o alineado a la derecha es aceptable para pasajes cortos.

En cuarto lugar, el interlineado debe ser al menos 1,5 veces el tamaño de la fuente dentro de los párrafos, y el espaciado entre párrafos debe ser al menos 2,25 veces el tamaño de la fuente. Estos mínimos garantizan suficiente espacio vertical para que las personas lectoras que siguen las líneas con cuidado no pierdan su lugar ni confundan líneas adyacentes.

En quinto lugar, el texto debe poder redimensionarse hasta un 200% sin tecnología de apoyo y sin pérdida de contenido o funcionalidad. Esto difiere ligeramente del SC 1.4.4 (Redimensionar texto, Nivel AA) en que exige explícitamente este comportamiento para la presentación visual de bloques de texto específicamente, y sin depender de un magnificador de pantalla o de un zoom del navegador que anule la página: la propia página debe admitir el escalado de forma adecuada.

Una excepción oficial clave: los requisitos no se aplican a subtítulos ni a imágenes de texto. El texto incrustado en imágenes ráster no puede redimensionarse ni recolorearse mediante CSS, razón por la cual el SC 1.4.5 (Imágenes de texto) desaconseja por separado su uso. El texto decorativo utilizado únicamente como elemento gráfico también queda excluido.

Para aprobar es necesario cumplir los cinco subrequisitos. Un fallo en cualquiera de ellos —por ejemplo, aplicar text-align: justify al cuerpo de un artículo largo sin mecanismo de anulación— constituye un fallo del criterio en su conjunto.

Por Qué Importa

La presentación visual del texto tiene un impacto desproporcionado en las personas lectoras que no experimentan la lectura de texto impreso o en pantalla estándar como algo sin esfuerzo. Los grupos más directamente afectados por este criterio incluyen personas con dislexia, personas con baja visión que dependen del zoom del navegador en lugar de magnificadores de pantalla, personas con síndrome de Irlen o sensibilidad escotópica, personas con discapacidades cognitivas que afectan la velocidad de lectura y la comprensión, y personas mayores cuya comodidad de lectura ha disminuido con el tiempo.

Según la British Dyslexia Association, aproximadamente el 10% de la población tiene algún grado de dislexia, y alrededor del 4% la experimenta de forma grave. Para estas personas, el texto completamente justificado puede crear distorsiones visuales que hacen que la lectura sea casi imposible. Las líneas de gran longitud agravan el problema al aumentar la distancia que el ojo debe recorrer al final de la línea, elevando la probabilidad de perder la referencia de cuál es la siguiente línea. Las combinaciones de color fijas que no pueden anularse impiden que las personas apliquen superposiciones de color o esquemas de contraste que han descubierto que facilitan su lectura.

Para las personas con baja visión —de las cuales la Organización Mundial de la Salud estima que hay aproximadamente 246 millones en todo el mundo— la capacidad de redimensionar el texto dentro del flujo de la página es fundamental. Si un diseño se rompe, trunca contenido u oculta la navegación cuando el texto se escala al 200%, estas personas quedan efectivamente excluidas de partes del sitio. Puede que no tengan acceso a software de magnificación de pantalla dedicado, o pueden preferir el control más matizado de los ajustes de zoom del navegador que han calibrado personalmente.

Considere un escenario concreto: una persona con dislexia moderada visita un portal de noticias en línea para leer un artículo de investigación de formato largo. El cuerpo del artículo usa text-align: justify, una columna de 900 px (aproximadamente 120 caracteres por línea con el tamaño de fuente predeterminado) y un esquema de color fijo gris oscuro sobre blanco con un interlineado de 1,2. La persona ha configurado su navegador para preferir un fondo sepia, pero el CSS del sitio anula tanto el primer plano como el fondo, neutralizando esa preferencia. En dos párrafos, el espaciado irregular, la longitud excesiva de las líneas y la imposibilidad de aplicar su tono preferido se combinan para hacer que el artículo sea prácticamente ilegible. Esto no es un caso hipotético extremo: describe el diseño predeterminado de muchos sitios editoriales importantes hoy en día.

Más allá del acceso para personas con discapacidad, estos requisitos se superponen con las mejores prácticas generales de legibilidad reconocidas por la investigación de UX. Los sitios que respetan la longitud de línea, el espaciado y la flexibilidad de color tienden a retener a las personas lectoras durante más tiempo, reducir las tasas de rebote y obtener mejores puntuaciones de legibilidad, todo lo cual tiene implicaciones medibles en SEO y participación.

Reglas Relacionadas de Axe-core

WCAG 1.4.8 requiere pruebas manuales. No hay reglas automatizadas de axe-core que señalen directamente infracciones de este criterio. La razón es fundamental: las herramientas automatizadas evalúan el DOM y los estilos CSS calculados, pero no pueden determinar si la combinación de color, longitud de línea, espaciado y comportamiento de redimensionamiento produce una experiencia de lectura accesible para una persona. Cada uno de los cinco subrequisitos implica un juicio contextual:

• La capacidad de seleccionar colores no puede evaluarse automáticamente porque una herramienta puede detectar que se han establecido tanto color como background-color, pero no puede determinar si la página proporciona un mecanismo de anulación controlado por la persona (como un selector de tema) o si se respeta la hoja de estilos de la persona usuaria del navegador. La presencia de propiedades personalizadas de CSS, conmutadores de tema en JavaScript o preferencias del lado del servidor debe ser evaluada por una persona evaluadora.
• El ancho de línea (límite de 80 caracteres) requiere renderizar el texto con el tamaño de fuente predeterminado de la persona usuaria y medir el número real de caracteres por línea. Las herramientas automatizadas no simulan de forma fiable esta medición en diferentes tipografías, tamaños de fuente y anchos de ventana. Una persona evaluadora debe inspeccionar visualmente o usar una superposición de conteo de caracteres.
• La justificación del texto puede detectarse parcialmente —axe podría teóricamente señalar text-align: justify— pero el criterio permite texto justificado si existe un mecanismo para que la persona usuaria lo cambie. Ninguna regla automatizada captura actualmente este matiz en axe-core 4.x.
• El interlineado y el espaciado entre párrafos requiere inspeccionar los valores calculados de line-height y margin en contexto y verificar que cumplan los umbrales de 1,5× y 2,25× respectivamente. Aunque los estilos calculados son legibles por la automatización, la determinación contextual de si un bloque califica como “un bloque de texto” sujeto al criterio requiere juicio humano.
• El redimensionamiento al 200% sin pérdida se solapa conceptualmente con la regla meta-viewport de axe (que comprueba user-scalable=no), pero esa regla aborda el SC 1.4.4, no el 1.4.8. Una página puede aprobar la comprobación automatizada de meta-viewport y aun así fallar el 1.4.8 si el diseño se rompe al 200% de zoom de manera que oculte o trunque bloques de texto.

Dado que las cinco comprobaciones requieren juicio humano, el 1.4.8 debe auditarse mediante procedimientos estructurados de revisión manual descritos en la siguiente sección.

Cómo Probar

1. Identificar los bloques de texto en la página. Navegue a una página representativa con mucho contenido (artículo, descripción de producto, términos de servicio, documentación de ayuda). Identifique todos los bloques sustanciales de texto corrido —párrafos, cuerpos de listas, celdas de tabla con prosa— que estén sujetos al criterio. Excluya subtítulos de imágenes y texto decorativo.
2. Comprobar el control de color. Abra las DevTools del navegador (F12) e inspeccione los estilos calculados de un bloque de texto. Si tanto color como background-color están establecidos explícitamente por el CSS de la página (no heredados de los valores predeterminados del navegador), verifique que la página proporcione una alternativa: un selector de tema, un conmutador de modo de alto contraste o instrucciones para habilitar una hoja de estilos de la persona usuaria. Si no existe ninguna, este subrequisito falla. También puede forzar temporalmente una hoja de estilos de la persona usuaria en Firefox (about:config → layout.css.has-selector.enabled) o usar la emulación de “Forced Colors” en Chrome DevTools para observar si el sitio respeta las preferencias de color del sistema.
3. Medir la longitud de línea. Use una extensión del navegador como “Line Length” o el panel “Intelligent Guided Tests” de axe DevTools para superponer conteos de caracteres, o cuente manualmente los caracteres en una línea larga representativa. Alternativamente, pegue una línea de texto en un procesador de texto y cuente los caracteres. Si las líneas superan consistentemente los 80 caracteres (o 40 para CJK) sin ningún mecanismo para que la persona usuaria estreche la columna, este subrequisito falla.
4. Inspeccionar la alineación del texto. En DevTools, compruebe el valor calculado de text-align para cada bloque de texto. Cualquier valor de justify en un bloque de texto de formato largo es un fallo a menos que la página proporcione un conmutador que permita a las personas cambiar a texto alineado a la izquierda.
5. Verificar los valores de espaciado. En DevTools, inspeccione el line-height calculado para los bloques de texto. Si se expresa en una unidad distinta de un multiplicador (por ejemplo, 24px), divídalo por el valor de font-size. El resultado debe ser ≥ 1,5. Luego inspeccione el margin-bottom (o margin-top) de los elementos de párrafo; dividido por el tamaño de fuente, debe ser ≥ 2,25. Los valores establecidos con la marca !important que impedirían las anulaciones de la persona usuaria deben anotarse como factor de riesgo.
6. Probar el redimensionamiento al 200%. En el navegador, establezca el zoom en 200% (Ctrl/Cmd + tecla “más”, o Ver → Acercar, dos veces desde 100%). Revise todos los bloques de texto en busca de truncamiento, desbordamiento oculto por overflow: hidden, texto que desaparece detrás de otros elementos o navegación que se vuelve inaccesible. Use la barra de herramientas de dispositivos de Chrome DevTools para simular la ventana con zoom si es necesario. Se produce un fallo si se pierde cualquier contenido de texto o si alguna funcionalidad deja de estar disponible.
7. Comprobación con tecnología de apoyo. Con NVDA y Firefox, haga zoom en la página al 200% y navegue por el artículo usando las teclas de flecha. Verifique que todo el texto siga siendo anunciado por el lector de pantalla (el contenido oculto mediante overflow: hidden después del zoom puede truncarse visualmente pero seguir leyéndose en voz alta; márquelo como un fallo visual independientemente). Con VoiceOver en macOS y Safari, repita la prueba de zoom. Estas comprobaciones ayudan a confirmar que los cambios de diseño relacionados con el zoom no eliminan contenido del árbol de accesibilidad.
8. Simulación de anulación por la persona usuaria. En Firefox, vaya a Configuración → General → Fuentes y colores → Colores, habilite “Usar mis colores elegidos” y establezca colores de primer plano y fondo personalizados. Vuelva a la página y verifique si el sitio respeta o anula estas elecciones. Los sitios que usan !important en las declaraciones de color anularán las preferencias de la persona usuaria, lo que constituye un fallo del subrequisito de capacidad de selección de color.

Cómo Corregir

Combinación de colores fija sin control de la persona usuaria — Incorrecto

<!-- Both color and background-color are hardcoded; user browser preferences are overridden -->
<style>
  .article-body {
    color: #1a1a1a;
    background-color: #ffffff;
    /* No theme switcher provided */
  }
</style>
<div class='article-body'>
  <p>Long-form article content goes here...</p>
</div>

Combinación de colores fija sin control de la persona usuaria — Correcto

<!-- Uses CSS custom properties so a theme switcher or user stylesheet can override both values -->
<style>
  :root {
    --text-color: #1a1a1a;
    --bg-color: #ffffff;
  }
  [data-theme='sepia'] {
    --text-color: #3b2a1a;
    --bg-color: #f5edd6;
  }
  [data-theme='high-contrast'] {
    --text-color: #ffffff;
    --bg-color: #000000;
  }
  .article-body {
    color: var(--text-color);
    background-color: var(--bg-color);
  }
</style>
<!-- Theme switcher gives users explicit control -->
<div role='group' aria-label='Color theme'>
  <button onclick="document.documentElement.setAttribute('data-theme','default')">Default</button>
  <button onclick="document.documentElement.setAttribute('data-theme','sepia')">Sepia</button>
  <button onclick="document.documentElement.setAttribute('data-theme','high-contrast')">High Contrast</button>
</div>
<div class='article-body'>
  <p>Long-form article content goes here...</p>
</div>

Texto justificado con longitud de línea excesiva — Incorrecto

<!-- text-align: justify applied to a very wide unrestricted column -->
<style>
  .content {
    text-align: justify;
    /* No max-width constraint; lines easily exceed 80 characters */
  }
</style>
<div class='content'>
  <p>This paragraph stretches across the full width of the viewport, creating uneven word spacing that makes reading difficult for users with dyslexia or other reading differences. Each line may contain well over 100 characters.</p>
</div>

Texto justificado con longitud de línea excesiva — Correcto

<!-- Left-aligned text with a max-width that keeps lines under 80 characters -->
<style>
  .content {
    text-align: left; /* Ragged-right prevents uneven word spacing */
    max-width: 66ch;  /* ch unit approximates character width; 66ch ≈ 80 average chars */
    line-height: 1.6; /* Exceeds the 1.5× minimum */
  }
  .content p {
    margin-bottom: 2.5em; /* 2.5× font-size exceeds the 2.25× paragraph spacing minimum */
  }
</style>
<div class='content'>
  <p>This paragraph is constrained to a comfortable reading width, uses left alignment, and has generous line and paragraph spacing — satisfying three of the five sub-requirements simultaneously.</p>
</div>

Interlineado insuficiente que se rompe al 200% de zoom — Incorrecto

<!-- line-height set in pixels; does not scale with font resizing -->
<style>
  .article p {
    font-size: 16px;
    line-height: 18px; /* Only 1.125× font size — below the 1.5× requirement */
  }
</style>
<div class='article'>
  <p>When the user zooms to 200%, this text becomes 32px but line-height remains 18px, causing lines to overlap and become unreadable.</p>
</div>

Interlineado insuficiente que se rompe al 200% de zoom — Correcto

<!-- line-height as a unitless multiplier scales with any font size change -->
<style>
  .article p {
    font-size: 1rem;   /* Respects browser default font size setting */
    line-height: 1.6;  /* Unitless: always 1.6× the current font size, even when zoomed */
    margin-bottom: 2.5em; /* Scales proportionally with font size */
  }
</style>
<div class='article'>
  <p>At any zoom level or font size, this paragraph maintains correct proportional spacing because line-height is expressed as a unitless number rather than a fixed pixel value.</p>
</div>

Errores Comunes

• Establecer line-height en píxeles o puntos en lugar de un multiplicador sin unidad. Cuando las personas escalan el texto o hacen zoom en la página, un interlineado basado en píxeles permanece fijo, lo que provoca que las líneas se superpongan. Use siempre un valor sin unidad como 1.6 para que el espaciado se escale proporcionalmente.
• Usar text-align: justify en texto de cuerpo de formato largo sin proporcionar una alternativa. Incluso cuando el texto justificado se ve limpio en escritorio con el zoom predeterminado, crea huecos irregulares entre palabras para las personas con dislexia. Elimine la justificación de los bloques de prosa o añada un conmutador de alineación visible para la persona usuaria.
• Establecer max-width en píxeles en lugar de unidades de caracteres (ch) o unidades relativas (em). Un ancho máximo basado en píxeles no se adapta cuando las personas cambian el tamaño de fuente predeterminado de su navegador, lo que puede permitir que las líneas superen los 80 caracteres con tamaños de fuente más pequeños y deje espacio desperdiciado con tamaños más grandes.
• Declarar tanto color como background-color con !important en elementos body o article. Usar !important bloquea explícitamente que las hojas de estilo de la persona usuaria anulen los colores, que es el mecanismo principal mediante el cual las personas con fotosensibilidad o síndrome de Irlen personalizan su entorno de lectura.
• Confiar en overflow: hidden en contenedores de texto sin probar al 200% de zoom. Los contenedores dimensionados en unidades de ventana o píxeles fijos recortarán el texto cuando la persona haga zoom, ocultando el contenido por completo en lugar de reflujo.
• Aplicar espaciado entre párrafos solo mediante padding en lugar de margin. Si un contenedor padre tiene overflow: hidden, el padding inferior colapsa visualmente y el espaciado parece ausente. Use margin-bottom en los párrafos para un espaciado fiable.
• Establecer el espaciado entre párrafos en píxeles (margin-bottom: 20px) en lugar de em. Al igual que el interlineado, el espaciado entre párrafos basado en píxeles no se escala con los cambios de tamaño de fuente, lo que hace que los párrafos se amontonen cuando las personas eligen fuentes base más grandes en la configuración de su navegador.
• Suponer que una ventana estrecha significa automáticamente líneas cortas. En ventanas móviles, un tamaño de fuente pequeño aún puede producir líneas muy largas en número de caracteres. Verifique siempre el conteo de caracteres por línea con el tamaño de fuente predeterminado del dispositivo, no solo midiendo el ancho de la columna en píxeles.
• Proporcionar un conmutador de tema de alto contraste que solo cambie las relaciones de contraste, no la capacidad de selección de color. Un conmutador que pasa de modo claro a modo oscuro sigue especificando tanto el primer plano como el fondo. El criterio exige que las personas puedan elegir sus propios colores, no solo elegir entre pares predefinidos. Complemente los preajustes con un selector de color personalizado o asegúrese de que la página respete las media queries prefers-color-scheme y forced-colors.
• Olvidar probar texto de formato largo en contenedores desplazables. Los bloques de texto dentro de elementos con overflow: scroll o overflow: auto suelen omitirse en las revisiones manuales. Estos contenedores tienen sus propias restricciones de ancho que pueden hacer que la longitud de línea o el comportamiento de zoom difieran del flujo principal del documento.

Relación con las Regulaciones de Accesibilidad de Turquía

La Circular Presidencial Nº 2025/10 de Turquía, publicada en el Boletín Oficial Nº 32933 el 21 de junio de 2025, establece requisitos obligatorios de accesibilidad digital que hacen referencia directa a las WCAG 2.1 (con una fuerte alineación con las mejores prácticas de WCAG 2.2). La Circular crea obligaciones exigibles para una amplia gama de tipos de entidades que operan en Turquía, incluidas instituciones públicas y organismos gubernamentales en todos los niveles, plataformas de comercio electrónico, bancos y proveedores de servicios financieros, hospitales e instituciones privadas de atención sanitaria, operadores de telecomunicaciones con 200,000 o más abonados, agencias de viajes, empresas de transporte privado y escuelas privadas autorizadas por el Ministerio de Educación Nacional.

WCAG 1.4.8 es un criterio de Nivel AAA, lo que significa que la Circular no lo exige como umbral legal mínimo: el requisito legal de base es generalmente la conformidad con el Nivel AA de las WCAG. Sin embargo, los criterios de Nivel AAA como Presentación visual tienen un peso práctico y reputacional significativo para las organizaciones turcas por varias razones.

En primer lugar, se espera que las instituciones públicas y las grandes entidades del sector privado cubiertas por la Circular demuestren una mejora progresiva en accesibilidad con el tiempo. Las personas auditoras y los organismos de supervisión consideran cada vez más los criterios AAA como indicadores de un compromiso genuino más allá del cumplimiento superficial. Las organizaciones que implementan proactivamente el 1.4.8 —en particular ofreciendo controles de tema de color, respetando las preferencias de color del sistema y manteniendo un espaciado de texto adecuado— tienen muchas menos probabilidades de enfrentarse a quejas de personas con dislexia, baja visión o fotosensibilidad.

En segundo lugar, Turquía tiene una población considerable de personas usuarias que se benefician directamente del 1.4.8. Con una prevalencia estimada de dislexia del 10% y millones de personas con baja visión, las entidades que atienden a grandes bases de consumidores —bancos, telecomunicaciones, plataformas de comercio electrónico, hospitales— pueden esperar que una parte significativa de sus personas usuarias tenga dificultades con una presentación visual no conforme. No abordar esto es tanto una barrera de accesibilidad como un riesgo empresarial.

En tercer lugar, ciertos servicios especializados —en particular en educación (escuelas privadas autorizadas por el MoNE) y atención sanitaria— pueden enfrentarse a directrices regulatorias específicas del sector que elevan el listón a AAA para el contenido presentado a poblaciones vulnerables como niñas y niños, personas mayores o personas con discapacidades cognitivas. En estos contextos, el 1.4.8 pasa de ser aspiracional a prácticamente obligatorio.

Las organizaciones que busquen demostrar una accesibilidad de primer nivel en el mercado turco —y preparar su postura de cumplimiento para el futuro a medida que evolucionen las regulaciones— deberían tratar el 1.4.8 como un estándar de diseño en lugar de una mejora opcional. Implementar propiedades personalizadas de CSS para temas de color, limitar el ancho de las columnas con unidades ch, eliminar el texto justificado de los bloques de prosa y usar valores de interlineado sin unidad son cambios de bajo costo y alto impacto que benefician a un público amplio y señalan un liderazgo genuino en accesibilidad dentro del marco regulatorio de Turquía.