¿Qué relación de contraste necesitas realmente?

Los umbrales son lo bastante simples para memorizarlos. Lo que da problemas es saber cuál se aplica a un elemento concreto, y hay cuatro reglas que se malinterpretan mucho.

Las cifras

Qué	AA	AAA
Texto de cuerpo	4.5:1	7:1
Texto grande	3:1	4.5:1
Componentes de interfaz y gráficos con significado	3:1	sin nivel AAA
Controles desactivados, elementos decorativos, logotipos	exentos	exentos

AA es lo que se le exige a casi todo el mundo. La ADA, la Ley Europea de Accesibilidad y los marcos equivalentes hacen referencia a WCAG 2.x en el nivel AA. AAA suele perseguirse de forma selectiva y no en todo el sitio: los propios autores de WCAG dicen que no se puede alcanzar con todo el contenido.

Regla 1: “grande” tiene una definición precisa

Texto grande significa 24px o más, o 18.66px o más si el peso es 700 o superior.

Esas cifras salen de convertir 18pt y 14pt en negrita con una referencia de 96dpi. El umbral para negrita es más bajo porque un trazo más grueso pone más tinta en pantalla con el mismo tamaño.

El error común es dar por hecho que cualquier título cuenta. Un subtítulo de 20px en peso regular no es texto grande. Necesita 4.5:1, igual que el texto de cuerpo.

Regla 2: los componentes de interfaz también necesitan contraste

El criterio de conformidad 1.4.11, añadido en WCAG 2.1, es el que más a menudo se pasa por alto por completo. Exige 3:1 para la información visual necesaria para identificar un componente y su estado.

En la práctica:

• Los bordes de los campos de entrada, frente al fondo que los rodea
• Los indicadores de foco
• Los contornos de interruptores y casillas de verificación en sus dos estados
• Los iconos que tienen significado por sí solos
• Las partes de un gráfico que transmiten información: una línea, una barra, un punto de datos

No se aplica a los gráficos decorativos ni a las partes de un componente que no hacen falta para entenderlo. Una sombra sutil bajo una tarjeta está bien. El borde de la tarjeta, si ese borde es lo único que te indica dónde está el campo de entrada, no lo está.

Este criterio atrapa a muchísimos diseños que por lo demás son cuidadosos. Los bordes de campo en gris pálido #e5e7eb sobre blanco dan alrededor de 1.3:1: un patrón común y un incumplimiento claro.

Regla 3: el texto de marcador de posición no está exento

Los controles desactivados están exentos de los requisitos de contraste. El texto de marcador de posición (placeholder) no, y los dos se confunden constantemente.

El placeholder es contenido real que se le presenta al usuario, así que necesita 4.5:1 como cualquier otro texto de cuerpo. El típico placeholder gris pálido no se acerca ni de lejos.

La mejor solución suele ser estructural más que cromática: si el placeholder está haciendo el trabajo de una etiqueta, debería ser una etiqueta. Los placeholders desaparecen en cuanto alguien empieza a escribir, que es justo cuando la gente más suele necesitar que le recuerden para qué era el campo.

Regla 4: el texto sobre imágenes necesita un fondo definido

Si el texto está sobre una fotografía o un degradado, no hay un único color de fondo con el cual medir, y la proporción cambia a medida que cambia la imagen.

Tienes que crear un fondo determinado: una capa sólida, un degradado superpuesto lo bastante denso para garantizar el peor caso, o un contenedor para el texto. Mide contra el punto más claro de la zona que queda detrás del texto, no contra el promedio.

Por el mismo motivo, las superficies muy translúcidas y desenfocadas son difíciles de hacer conformes: su fondo es lo que sea que se esté desplazando por debajo, así que la proporción no es una propiedad fija en absoluto.

Un umbral no es una calificación

Superar 4.5:1 por 0.01 no es significativamente mejor que quedarse corto por 0.01. La cifra es un mínimo, no una nota.

Si una combinación aprueba por poco, tómalo como una advertencia de que va a fallar en cuanto alguien la ponga un poco más pequeña o un diseñador aclare el gris un paso. Deja margen en todo lo que esperes reutilizar.

Lo que la proporción no puede decirte

Hay dos cosas que quedan por completo fuera de este modelo.

No ve la tipografía. Un pie de foto de 12px con trazo finísimo y un título de 32px en negrita con los mismos colores obtienen la misma proporción, y solo uno de los dos se puede leer. APCA modela esto; WCAG 2 no.

No puede decirte si dos colores de primer plano se distinguen entre sí. Eso es lo que rompe los gráficos y los colores de estado para las personas con daltonismo, y ninguna verificación de contraste lo detecta porque esos dos colores nunca se comparan.

Las dos carencias son reales, y vale la pena revisar cada una por separado una vez que las proporciones estén en orden.

Nuestro verificador de contraste muestra todos los umbrales a la vez (AA y AAA, cuerpo y texto grande, además de la regla de componentes), así que puedes ver qué aprueba y qué no aprueba una combinación sin cambiar de modo.