Texto de cuerpo legible: longitud de línea, interlineado y contraste

Qué es

La longitud de línea (ancho de composición) es el número de caracteres por línea. El interlineado es la distancia de línea base a línea base. La relación de contraste es la relación de luminancia entre el texto y el fondo. WCAG 2.2 da cifras para las tres. El criterio de éxito 1.4.8 «Presentación visual» (AAA) exige para los bloques de texto: como máximo 80 caracteres por línea (40 para escrituras CJK), sin justificación, al menos un interlineado de una vez y media dentro de los párrafos y un espaciado entre párrafos que sea al menos 1,5 veces mayor que el interlineado, además de una ampliación al 200 por ciento sin desplazamiento horizontal. El criterio 1.4.12 «Espaciado del texto» (AA) exige que no se pierda ningún contenido ni ninguna función cuando las personas usuarias fijan el interlineado en al menos 1,5 veces el tamaño de la fuente, el espaciado entre párrafos en 2 veces, el espaciado entre letras en 0,12 veces y el espaciado entre palabras en 0,16 veces. El criterio 1.4.3 «Contraste (mínimo)» (AA) exige 4,5:1 para el texto y 3:1 para el texto grande, que el documento define como aproximadamente 18 puntos o 14 puntos en negrita.

Por qué importa

Las líneas demasiado largas hacen que el ojo pierda la línea al saltar de vuelta al principio; un interlineado estrecho hace que las líneas se difuminen entre sí; un contraste débil resulta ilegible bajo la luz del sol y para cualquier persona con visión limitada. Son errores frecuentes que vuelven incómodo incluso un contenido bien estructurado, y son baratos de corregir.

Cómo aplicarlo

• Limitar la columna de texto con max-width en ch (por ejemplo, max-width: 65ch). Un ch es el ancho de avance del dígito 0 de la fuente, así que el límite escala con la fuente; en una fuente proporcional una línea suele contener más caracteres que su valor en ch, así que conviene contar una línea de muestra contra el límite de 80 caracteres en lugar de darlo por supuesto.
• Fijar line-height como un número sin unidad (1.5 o más para el texto de cuerpo, menos para los titulares grandes), para que escale con la fuente; aumentarlo para líneas largas y fuentes con altura de x elevada.
• Usar rem para los tamaños de fuente y em/rem para los espaciados, de modo que el zoom del navegador y los ajustes de tamaño de fuente surtan efecto; no fijar alturas en píxeles en los contenedores de texto, para que el texto reespaciado no se desborde.
• Comprobar cada par de texto y fondo frente a 4,5:1, incluidos el texto de relleno, el texto sobre imágenes y ambos esquemas de color; los titulares grandes pueden quedarse en 3:1.
• Alinear el texto de cuerpo a la izquierda (al inicio de línea); la justificación sin separación silábica genera ríos de espacio en blanco, y el criterio 1.4.8 menciona explícitamente renunciar a la justificación.

Trampas

Los trazos finos pierden contraste en las pantallas, aunque la relación de color sea correcta. line-height en px no escala con el texto. El recorte con text-overflow: ellipsis oculta contenido cuando las personas usuarias amplían los espaciados. Las herramientas de contraste solo miden el color; una imagen de fondo agitada necesita una superficie opaca o desenfocada detrás del texto.