Por qué el texto de cuerpo de 14px nunca puede aprobar APCA

La primera vez que una herramienta de contraste te dice que un texto negro sobre fondo blanco no aprueba, das por hecho que la herramienta está rota. Normalmente no lo está. Si el texto es de 14px en peso regular, APCA lo considera inutilizable sin importar qué colores elijas.

Esto sorprende lo suficiente como para que valga la pena explicarlo bien.

El contraste no depende solo del color

WCAG 2 trata el contraste como una propiedad de dos colores. Le das un primer plano y un fondo y te devuelve una proporción, sin saber nada de cómo se va a componer el texto.

APCA trata el contraste como una propiedad de dos colores y de la forma de los glifos que se dibujan con ellos. Esto se acerca más a cómo funciona la vista. Lo que llega a tu ojo no es una combinación abstracta de colores, sino una cantidad de tinta repartida en trazos. Los trazos finos a tamaños pequeños aportan muy poca, y el antialiasing los aclara todavía más en los bordes.

Por eso los umbrales de APCA se mueven con la tipografía. Su tabla de referencia indica, para cada nivel de contraste, el tamaño de fuente mínimo utilizable en cada peso:

Lc	Peso 300	Peso 400	Peso 500	Peso 700
90	21px	16px	15.5px	14px
75	24px	18px	16px	14px
60	42px	24px	21px	16px
45	72px	42px	32px	24px

Recorre la columna del peso 400. Con Lc 90, que está cerca del máximo posible, ya que el negro puro sobre blanco puro da Lc 106, el tamaño utilizable más pequeño es 16px.

No hay ninguna fila en la que aparezca 14px con peso 400. Subir el contraste no ayuda, porque 16px ya es el mínimo con el contraste más alto que puede producir la pantalla.

Lo que puedes hacer en su lugar

Ponlo a 16px. Es la solución más simple, y la que de todos modos debería tener la mayor parte del texto de cuerpo. 16px lleva una década siendo el valor predeterminado sensato para el texto de cuerpo.

Mantén 14px y súbele el peso. Mira la columna del peso 700: 14px es utilizable con Lc 90 y Lc 75. Una etiqueta de 14px en negrita con un contraste fuerte está bien para APCA. Esta suele ser la respuesta correcta para las etiquetas de interfaz cuando el espacio vertical es realmente limitado.

Replantéate si de verdad tiene que ser texto. Una marca de tiempo de 14px en gris claro que nadie puede leer no está transmitiendo información. O importa, y entonces hay que hacerla legible, o no importa, y entonces hay que quitarla.

El corolario incómodo

En cuanto aceptas la tabla, muchas convenciones habituales de interfaz dejan de tener defensa.

La etiqueta en mayúsculas de 11px o 12px, en un gris apagado, está en todos los sistemas de diseño modernos. Según APCA, 12px con peso 400 no tiene ningún contraste que apruebe, e incluso con peso 700 necesita un Lc altísimo. Hicimos esta comprobación en nuestra propia interfaz mientras construíamos este sitio y tuvimos que pasar las etiquetas de 11px a 13px y subirles el peso. La herramienta encontró el problema en su propia interfaz.

El texto de marcador de posición (placeholder) es el otro infractor habitual: pequeño, claro y muchas veces la única etiqueta que tiene un campo.

WCAG 2 no está equivocado, solo incompleto

Lo que significa es que WCAG 2 está incompleto en este eje concreto, algo que sus autores sabían. Modelar el tamaño y el peso en 2008 habría requerido datos y capacidad de cálculo que no eran prácticos en ese momento. Una proporción entre dos luminancias era una aproximación razonable, y ha hecho muchísimo bien.

Pero conviene que sepas lo que no puede ver. Un pie de foto de 12px y un titular de 32px con los mismos colores reciben la misma puntuación de WCAG, y solo uno de los dos se puede leer.

Qué hacer en la práctica

Sigue registrando la proporción de WCAG, porque es con lo que se mide la conformidad. Usa APCA para comprobar si eso se puede leer de verdad al tamaño con el que lo vas a publicar.

Y cuando APCA repruebe una combinación de colores a un tamaño pequeño, resiste el impulso de oscurecer el color. Revisa primero la tabla. Muy a menudo la respuesta no es otro color, sino 2px más o un peso más grueso.

Nuestro verificador de contraste muestra las dos cifras con el tamaño y el peso que elijas, y cuando un tamaño es inutilizable con cualquier contraste lo dice directamente, en lugar de reportar un fallo que no puedes arreglar con el color.