Reglas de contraste para texto grande

El hallazgo de la auditoría que nadie esperaba fue el hero. El titular —azul de marca sobre blanco a ≈3,3:1— se había clasificado como exento del mínimo del texto de cuerpo meses antes, correctamente: en sus 40px de escritorio calificaba como texto grande, donde basta con 3:1. Lo que la auditoría detectó fue el breakpoint móvil. La escala responsiva bajaba ese mismo titular a 22px, y a 22px normal ya no es texto grande. Mismo color, mismo elemento, misma hoja de estilos: un aprobado en un ancho de pantalla y un suspenso en otro.

WCAG cuenta el texto como “grande” a partir de 18pt (24px) con peso normal, o a partir de 14pt (18,66px) en negrita — y el mínimo de contraste del texto grande baja de 4,5:1 a 3:1. El tamaño que decide es el tamaño renderizado en la pantalla real, no el tamaño en el mockup más ancho. La excepción es real y útil, y también es la regla peor aplicada de este rincón del estándar — por eso tiene su propia pieza dentro de nuestra guía de contraste.

¿Qué cuenta exactamente como texto grande?

La definición de texto a gran escala traza dos líneas: 18 puntos en peso normal, o 14 puntos en negrita. El estándar habla en puntos, las pantallas hablan en píxeles, y la conversión —suponiendo el píxel de referencia CSS, donde 1pt = 1,333px— aterriza en los dos números que vale la pena memorizar: 24px normal y 18,66px negrita. Ambos son “y hacia arriba”: 24px normal califica, 23px normal no; 18,66px negrita califica, 18px negrita no.

Vale la pena nombrar honestamente dos bordes difusos. “Negrita” no está fijada a un número de peso concreto en el criterio — 700 es sin duda negrita, y si un 600 semibold cuenta es terreno de criterio. Y la definición no hace distinción por debajo del peso normal: un tipo de letra fino de 24px califica según la letra de la regla, aunque sus trazos finísimos son exactamente donde más duele el bajo contraste. La regla es un mínimo, no un modelo de legibilidad.

¿Por qué el texto grande tiene un mínimo más bajo?

Porque el grosor del trazo cambia lo que el ojo puede resolver. La sensibilidad al contraste depende de la frecuencia espacial — de lo fino que sea el detalle. Los trazos finos del texto pequeño son detalle de alta frecuencia, donde la sensibilidad al contraste humana es más débil y cada punto de contraste importa; los trazos gruesos de un titular de display son de baja frecuencia, donde el sistema visual rinde casi al máximo y puede tolerar una diferencia más tenue. Esa es la lectura perceptual de la excepción, sostenida con ligereza: los trazos más grandes son sencillamente señales más fáciles, así que el estándar exige menos a su color.

¿Dónde ayuda legítimamente la excepción?

Allí donde el color de marca de luminosidad media se encuentra con la tipografía de display. Muchas paletas de marca viven en la banda que suspende el texto de cuerpo pero supera el 3:1 — y para ellas la excepción es la diferencia entre “inservible para tipografía” y “utilizable justo donde la marca quiere sonar más fuerte”.

El caso trabajado: un azul de marca más claro, #4A8CF7, mide ≈3,3:1 sobre blanco —calculado, y por debajo del mínimo de 4,5:1 del cuerpo—. Como titular de 32px es texto grande, el mínimo es 3:1, y la combinación aprueba legítimamente. El mismo azul puesto como texto de cuerpo a 16px suspende. Da la vuelta a la combinación para un hero: texto de display blanco sobre un fondo #4A8CF7 es el mismo ≈3,3:1 — legal a 48px, mientras que el subtítulo blanco de 16px que se sienta debajo en el mismo hero suspende su mínimo. Un relleno, un titular que aprueba y una línea de letra pequeña que no.

Abre este azul con ambos mínimos en Scale Composer — la misma combinación comprobada como texto de cuerpo y como texto grande, un mínimo roto y otro superado, con el Lc de APCA al lado.

¿Qué mínimo aplica según el tamaño y el peso?

Para la conformidad AAA aplica la misma definición con ambos mínimos elevados: 7:1 para texto normal, 4,5:1 para texto grande.

¿Cuáles son las malas aplicaciones más comunes?

Cuatro patrones cubren la mayoría de las decisiones equivocadas:

1. “Es un encabezado, así que es grande.” La regla lee tamaños, no semántica — un h3 a 18px normal es texto normal y debe 4,5:1.
2. Aplicarla a los botones. La mayoría de las etiquetas de botón están a 14–16px con peso normal, muy lejos de cualquiera de los dos umbrales; probar el único botón sobredimensionado y generalizar extiende calladamente la excepción a toda una clase de componente.
3. “Es negrita, así que es grande.” La negrita baja el umbral de tamaño; no lo elimina. 18px negrita queda por debajo de la línea de 18,66px y debe 4,5:1.
4. La trampa del breakpoint — el fallo del inicio. La regla sigue el tamaño renderizado, así que la tipografía fluida que cruza los 24px (o 18,66px negrita) en algún punto de su rango cambia de mínimo en algún punto de su rango. La comprobación pertenece al tamaño renderizado más pequeño, no al más grande.

Audita la banda límite

El texto que vive entre aproximadamente 17px y 24px es donde se agrupan las decisiones equivocadas — lo bastante cerca de los umbrales como para que el peso, el escalado fluido o un solo ajuste de diseño cambien qué mínimo aplica. Carga una combinación límite y compruébala contra ambos mínimos — un encabezado de clase 20px probado a 4,5:1 y a 3:1, para que veas si tu color sobrevive a ser reclasificado antes de que un breakpoint lo decida por ti.