Pauta 1.4 Distinguible: contraste, redimensionado, reflow, espaciado, imágenes de texto y contenido al pasar el puntero

La pauta 1.4 agrupa los criterios que más afectan a las personas con baja visión, que son muchas más que las personas ciegas. Varios de ellos tienen umbrales numéricos que hay que medir con precisión, y todos tienen excepciones que conviene conocer para no reportar fallos inexistentes. Esta lección recorre los criterios de nivel A y AA de la pauta, con sus medidas, pruebas y fallos típicos.

1.4.1 Uso del color (A)

El color no puede ser el único medio visual para transmitir información, indicar una acción, pedir una respuesta o distinguir un elemento. Casos frecuentes: enlaces dentro de texto distinguidos solo por color (deben tener subrayado u otra marca, o un contraste de 3:1 con el texto circundante más un indicador al pasar el puntero o recibir el foco); campos con error solo en rojo; leyendas de gráficos solo por color; estados de pestaña o filtro solo por fondo. Prueba: pon la página en escala de grises (herramientas de desarrollo, emulación de deficiencias visuales) y comprueba que la información sigue ahí.

1.4.2 Control del audio (A)

Si un audio suena automáticamente más de tres segundos, debe poder pausarse o detenerse, o controlarse su volumen de forma independiente del sistema. Es uno de los cuatro criterios de no interferencia: afecta a toda la página aunque el audio venga de un tercero.

1.4.3 Contraste (mínimo) (AA) y 1.4.6 Contraste (mejorado) (AAA)

Texto e imágenes de texto: ratio mínima 4,5:1; texto grande (al menos 18 pt, o 14 pt en negrita; aproximadamente 24 px, o 18,66 px en negrita) 3:1. Excepciones: texto de controles inactivos, texto puramente decorativo, texto en imágenes donde no es relevante, y logotipos o nombres de marca. A nivel AAA, 7:1 y 4,5:1 respectivamente.

Cómo medir: cuentagotas sobre el color real del texto y del fondo tal como se renderizan (no los valores de la guía de estilo, que pueden diferir por opacidad, superposiciones o antialiasing). Mide en todos los estados: normal, hover, foco, visitado, deshabilitado (exento, pero conviene anotarlo), placeholder (no exento), texto sobre imagen en el punto más desfavorable.

Fallos típicos: grises claros en textos secundarios (#999 sobre blanco da 2,8:1), placeholders, texto blanco sobre colores corporativos claros, enlaces en el pie sobre fondo oscuro, texto sobre fotografías sin capa de oscurecimiento, texto de botones secundarios.

1.4.4 Cambio de tamaño del texto (AA)

El texto debe poder ampliarse hasta el 200 % sin tecnología de apoyo y sin pérdida de contenido o funcionalidad. Se cumple normalmente con el zoom del navegador, pero falla cuando hay alturas fijas que cortan el texto, contenedores con overflow: hidden, textos en botones que desbordan, o tamaños en píxeles en elementos que no escalan. También se considera habitualmente un fallo (y axe lo marca con la regla meta-viewport) que el sitio bloquee el zoom en móvil con user-scalable=no o maximum-scale=1 en el viewport, aunque algunos navegadores ignoren esa restricción.

1.4.5 Imágenes de texto (AA)

Si la misma presentación visual puede lograrse con texto real, no se debe usar imagen de texto, salvo que sea personalizable por el usuario o esencial (logotipos). Banners con texto incrustado, botones como imágenes, cabeceras con tipografía «especial» en PNG. Hoy, con fuentes web, casi nunca hay justificación. Las imágenes de texto además deben cumplir 1.1.1 (alt con el mismo texto) y 1.4.3.

1.4.10 Reajuste de los elementos (AA)

El contenido debe presentarse sin pérdida de información ni funcionalidad y sin requerir desplazamiento en dos dimensiones para: contenido con desplazamiento vertical a una anchura equivalente a 320 píxeles CSS; contenido con desplazamiento horizontal a una altura equivalente a 256 píxeles CSS. Excepción: partes del contenido que requieren un diseño bidimensional para su uso o significado (imágenes, mapas, diagramas, vídeo, juegos, presentaciones, tablas de datos, interfaces donde es necesario mantener barras de herramientas visibles mientras se manipula contenido).

Prueba: ventana de 1280 px con zoom al 400 %, o viewport de 320 px en herramientas de desarrollo. Fallos: scroll horizontal por elementos de ancho fijo, menús que no colapsan, tablas de maquetación, modales más anchos que la pantalla, contenido cortado por overflow. Las tablas de datos están exentas del scroll bidimensional, pero sus celdas deben seguir siendo legibles.

1.4.11 Contraste no textual (AA)

Ratio mínima de 3:1 frente a los colores adyacentes para: (a) la información visual necesaria para identificar componentes de interfaz y sus estados (bordes de campos, indicador de foco, casilla marcada, estado seleccionado), salvo componentes inactivos o cuya apariencia determina el agente de usuario sin modificación del autor; y (b) las partes de objetos gráficos necesarias para entender el contenido (líneas de un gráfico, iconos informativos), salvo que una presentación concreta sea esencial.

Matices importantes: no se exige contraste de un botón respecto a su fondo si el botón tiene texto con contraste suficiente que lo identifica (el texto ya marca el componente); sí se exige para un campo de texto cuyo único indicador es el borde, y para el indicador de foco. En gráficos, se mide cada elemento necesario (barras, sectores adyacentes entre sí si no hay separador ni etiqueta).

1.4.12 Espaciado del texto (AA)

Si se aplican, sin cambiar nada más, interlineado de al menos 1,5 veces el tamaño de fuente, espacio tras párrafos de al menos 2 veces, espaciado entre letras de al menos 0,12 em y entre palabras de al menos 0,16 em, no debe perderse contenido ni funcionalidad. Se aplica a lenguajes y sistemas de escritura que admiten esas propiedades. Prueba: bookmarklet o hoja de usuario. Fallos: textos que desbordan contenedores de altura fija, botones con texto cortado, menús horizontales que se montan, tooltips truncados.

* {
  line-height: 1.5 !important;
  letter-spacing: 0.12em !important;
  word-spacing: 0.16em !important;
}
p { margin-bottom: 2em !important; }

1.4.13 Contenido con hover o foco (AA)

Cuando contenido adicional aparece al pasar el puntero o al recibir el foco (tooltips, submenús, tarjetas de previsualización) y desaparece al retirarlo, debe cumplir tres condiciones: descartable (se puede ocultar sin mover el puntero ni el foco, normalmente con Escape, salvo que no oculte nada ni sea un error de entrada); señalable (si aparece al pasar el puntero, el puntero puede moverse sobre el contenido nuevo sin que desaparezca); y persistente (permanece hasta que se retira el puntero o el foco, se descarta o deja de ser válido). Excepción: contenido controlado por el agente de usuario, como el title nativo.

Fallos típicos: tooltips personalizados que se cierran al mover el puntero hacia ellos (las personas con magnificador no pueden leerlos), submenús que no se cierran con Escape, previsualizaciones que desaparecen tras unos segundos.

Resumen

• 1.4.1: el color no es el único medio; enlaces en texto necesitan algo más que color. 1.4.2: audio automático > 3 s controlable (no interferencia).
• 1.4.3: 4,5:1 texto normal, 3:1 texto grande, medido sobre colores renderizados y en todos los estados; excepciones: inactivos, decorativos, logotipos.
• 1.4.4 (200 %), 1.4.10 (320 px / 400 %) y 1.4.12 (espaciado) son tres pruebas distintas; 1.4.5 prohíbe imágenes de texto evitables.
• 1.4.11: 3:1 para indicadores de componentes y estados (bordes, foco) y para partes informativas de gráficos.
• 1.4.13: el contenido en hover o foco debe ser descartable, señalable y persistente.