Contraste en interfaces: qué medir además del texto

Dos colores pueden aprobar el contraste en una muestra y fallar en la pantalla final. Basta con que el texto caiga sobre la zona clara de una foto, que el borde del campo se funda con el fondo o que el foco desaparezca al cambiar de sección. El numerito tranquiliza, claro. Pero sólo describe una pareja de colores.

Elige los pares que de verdad se tocan

Empieza por el elemento que debe leerse y el color que tiene justo detrás. Para texto de tamaño normal, el nivel AA de las WCAG 2.2 exige al menos 4,5:1; en texto grande, 3:1. No redondees un 4,49 para darlo por bueno.

En una fotografía, un degradado o una capa con transparencia no existe un único fondo. Mide el punto menos favorable por el que pasa el texto. Si el resultado depende de que la imagen nunca cambie, conviene añadir una banda de color estable y volver a probar.

Texto, controles y todos sus estados

Aquí suele escaparse la mitad del trabajo. Los bordes que permiten reconocer un campo, los iconos necesarios para entender una acción y las marcas de selección también cuentan. El criterio de contraste no textual de W3C fija 3:1 respecto a los colores adyacentes para esos indicadores.

Haz una lista corta por componente: reposo, hover, foco, pulsado, seleccionado y error. Después comprueba el texto y la señal visual de cada estado. Un botón puede verse perfecto quieto y perder su etiqueta al pasar el ratón. Y un aro de foco azul funciona sobre blanco hasta que llega a una cabecera azul.

Cuando el color está contando algo

Un ratio alto no arregla una instrucción que depende de distinguir rojo y verde. Si el rojo significa error, añade un mensaje o un icono; si una línea representa una serie, suma etiquetas o patrones. W3C pide una señal visible además del color cuando el tono comunica información.

Mira la pantalla en escala de grises. ¿Siguen entendiéndose los errores, los enlaces y la selección actual? Esta prueba no simula todas las alteraciones de la visión cromática, pero descubre rápido las decisiones que descansan en una sola pista.

Lleva la comprobación a una pantalla real

Comprueba los pares con una herramienta como el Contrast Checker de WebAIM y guarda los resultados junto a los tokens de color. Luego recorre una pantalla real con teclado, zoom al 200 % y brillo bajo. Es una prueba bastante poco glamourosa; también se parece mucho más al uso cotidiano que mirar dos hexadecimales en Figma.

La revisión cabe en una tabla: elemento, estado, primer color, color adyacente, ratio y segunda señal. Si una fila queda en blanco, falta acordar qué se mide o cómo se distingue ese estado.