Contraste para bordes, iconos y componentes de interfaz

Fíjate en los bordes de los campos de entrada de los productos que usas a diario: un susurro de gris sobre blanco, a menudo un valor de la clase #D1D5DB que mide ≈1,5:1 contra la página. En una habitación con poca luz, en un panel de baja calidad o a través de unos ojos envejecidos, el límite del campo simplemente no está ahí: el usuario apunta a una caja de texto cuyos bordes no puede ver. El borde pasó todas las revisiones, porque las revisiones miran el contraste del texto, y un borde no es texto.

El WCAG lo cubre en el 1.4.11, Contraste no textual: la información visual necesaria para identificar un componente o su estado —límites de campos, iconos con significado, indicadores de foco, la diferencia entre marcado y sin marcar— necesita 3:1 contra sus colores adyacentes. No contra la página: contra lo que sea que tenga al lado. Es el menos conocido de los criterios de contraste y el que obliga a tomar más decisiones de criterio, por lo que se gana su propio apartado en nuestra guía de contraste.

¿Qué partes de la interfaz necesitan un contraste de 3:1?

El Criterio de Éxito 1.4.11 traza su línea en identificar u operar: todo lo que un usuario debe ver para saber que un control existe, qué es y en qué estado se encuentra. En la práctica:

• Bordes de campos de entrada, cuando son el único límite visible del campo. Si nada más marca dónde empieza el campo, el borde es el que hace la identificación y debe cumplir el 3:1.
• Iconos con significado: la papelera que es el botón de borrar, la lupa que es la búsqueda. Un icono con una etiqueta de texto visible al lado queda libre; la etiqueta identifica el control.
• Indicadores de foco. El anillo o contorno que muestra dónde está el foco del teclado debe poder encontrarse, y 3:1 es su suelo.
• Estados de los controles: la diferencia visual que indica marcado frente a sin marcar, seleccionado frente a no, activado frente a desactivado.
• Elementos de gráficos que transmiten significado: la línea de un gráfico de líneas, los límites de los sectores que un lector debe distinguir para leer los datos.

¿Qué queda exento y dónde empieza el juicio?

Tres exenciones son claras: la decoración pura (los separadores, los patrones de fondo y los adornos ornamentales no transmiten nada y no deben nada), los controles deshabilitados y los componentes cuya apariencia determina el propio navegador (controles nativos sin estilos).

La cuarta es donde las listas de comprobación aplanan un matiz real: la identificación redundante. El criterio exige que el componente sea identificable, no que cada una de sus características visuales pase por separado. Un campo de entrada con una etiqueta visible encima y un relleno que se diferencia de la página puede ser identificable aunque su borde tenue no llegue al 3:1: el borde ya no es lo único que hace el trabajo. Este es territorio de juicio honesto, no un resquicio legal: la pregunta que hay que hacerse es por qué señal localiza realmente el usuario el campo, y si esa señal supera el suelo. Si la respuesta es «el borde», el borde debe cumplir el 3:1.

¿Qué significa «contra los colores adyacentes»?

Los componentes se miden contra lo que tienen al lado, no contra un color de página global. Un campo blanco sobre una tarjeta gris claro mide su borde contra la tarjeta por fuera y contra el relleno blanco por dentro: la página que hay detrás de la tarjeta nunca entra en la ecuación. Esto funciona en ambos sentidos: un borde que pasa sobre la página puede fallar sobre una tarjeta con tinte, y una diferencia de relleno que cuenta como límite en un contexto se desvanece en otro. La razón intuitiva de que exista el suelo: leer texto es una tarea foveal que se hace de cerca, pero encontrar un control se hace de un vistazo, en la periferia, donde los bordes débiles desaparecen primero. Un límite tiene que sobrevivir a que lo miren de pasada, no solo a que lo miren de frente.

¿Qué puntuación obtiene un campo de entrada real?

Un campo de entrada sobre una página blanca, dentro de una tarjeta gris claro #F3F4F6: cada valor calculado:

La forma del resultado es la habitual: el anillo de foco y el icono están bien, el marcador de posición falla como texto (un criterio aparte: el marcador de posición no está exento) y el borde de moda falla en todas partes donde se mide. El neutro más claro que alcanza el 3:1 sobre blanco se calcula en ≈#949494: visiblemente más oscuro de lo que prefiere el gusto actual, que es la tensión de diseño resumida en una cifra.

Abre la anatomía de este campo en Scale Composer: los roles de borde, foco y estado que deriva una superficie, cada uno comprobado contra el suelo de 3:1 en el momento de la derivación, con las partes que fallan marcadas contra sus colores adyacentes.

¿Pueden los bordes seguir siendo sutiles y aun así pasar?

La tensión es real: los bordes finísimos son la moda actual, y un borde a 3:1 es inconfundiblemente visible. Tres soluciones se sostienen:

• Gasta el 3:1 solo donde el borde sea el único límite. Los campos de entrada llevan el borde visible; los contornos de tarjeta puramente decorativos pueden quedarse tenues, porque la decoración está exenta.
• Deja que sea la diferencia de fondo la que haga de límite. Un campo relleno sobre un fondo contrastante puede identificarse por su relleno, pero entonces es la diferencia de relleno la que debe cumplir el 3:1, y la mayoría de los tintes sutiles se quedan muy lejos, como muestra la fila de ≈1,1:1 de arriba.
• Mantén el estado de foco a plena intensidad. Sea cual sea la sutileza que compre el estado en reposo, el indicador de foco es el único momento en que se busca activamente el límite: gastar ahí el ahorro echa por tierra el propósito.

Este es también un lugar donde la derivación se gana el sueldo: el conjunto de roles de Scale Composer incluye border, borderSubtle, focus y roles de estado, con el suelo de 3:1 aplicado allí donde lo exige la función del rol: un borde sutil existe como su propio rol precisamente para que el que soporta la carga no se aclare silenciosamente hasta convertirse en él.

Lleva un borde hasta el suelo

La diferencia entre 1,5:1 y 3:1 es más fácil de sentir que de leer. Toma el rol de borde y lleva su luminosidad hacia el suelo: observa cómo sube el ratio contra el relleno y contra la tarjeta a medida que el gris se oscurece, mira dónde aterriza el 3:1 visualmente y juzga por ti mismo cuánta sutileza sobrevive en un borde que un usuario puede encontrar de verdad.