Jerarquía visual sin color: 7 recursos en vez del acento

La jerarquía visual sin color es el trabajo de ordenar lo que ve el usuario usando solo tamaño, peso, espacio y valor, de modo que la pantalla siga leyéndose en el orden correcto cuando desaparece el color de acento. Hace falta sobre todo en productos neutros: paneles, zonas de administración, editores, herramientas internas. Donde el azul ya significa enlace y el rojo ya significa acción destructiva, a la marca no le queda un tercer color para marcar énfasis.

Construimos bastantes productos así, y en cada auditoría aparece el mismo patrón. Un equipo marca la importancia con un acento. Luego se queda sin acento. Todos los botones son primarios, todas las etiquetas son azules, y el ojo ya no tiene con qué ordenar.

Por qué una jerarquía basada en el color se agota

El color hace una cosa mejor que cualquier otro canal: nombra una categoría. Azul es enlace, rojo es acción destructiva, ámbar es pendiente. La categoría no es el rango. Cuando el mismo acento tiene que decir "esto se pulsa" y a la vez "esto es lo más importante de la página", dos señales comparten un solo canal y quien lee tiene que adivinar cuál querías decir.

Hay un segundo coste. Alrededor del 8% de los hombres y del 0,5% de las mujeres tiene una deficiencia de visión del color en el eje rojo-verde, según Colour Blind Awareness. Es un dato del norte de Europa; las estimaciones globales agregadas bajan hasta cerca del 4,5% en hombres. Con cualquiera de las dos cifras, una jerarquía que solo vive en el tono resulta invisible para una parte de tus usuarios. Por eso el criterio WCAG 1.4.1 prohíbe que el color sea el único medio visual para transmitir información.

La versión de oficio de esa regla es más exigente que la legal. El cumplimiento pide una segunda pista. Un trabajo bien hecho pide que toda la escala aguante aunque quites el tono.

Por qué añadir más grises no lo arregla

El reflejo es ampliar la escala de neutros. Nueve grises en vez de tres. Casi nunca sirve, y el motivo se mide. El criterio WCAG 1.4.11 pide 3:1 entre un componente de interfaz y lo que tiene al lado, y el texto corrido pide 4,5:1. Sobre fondo blanco, una escala de nueve pasos deja unos cuatro que superan esos umbrales. El resto es decoración que se pierde en un portátil al 40% de brillo dentro de una sala iluminada.

Una escala tampoco dice nada sobre el rango. Dos grises al mismo tamaño y con el mismo peso se leen como dos elementos de una lista, nunca como padre e hijo. La escala es una paleta. La jerarquía es un conjunto de relaciones entre elementos, y las relaciones necesitan más de un canal.

Los canales que sostienen la jerarquía sin acento

Son siete, en el orden en que los aplicamos. Cada uno cuesta menos de mantener y se rompe menos que el siguiente.

1. Tamaño, con saltos lo bastante amplios para parecer intencionados

El Nielsen Norman Group pone el tamaño en primer lugar en su definición de jerarquía visual, y la razón es anterior a la lectura: lo más grande se registra como más importante antes de haber leído una palabra. El fallo habitual es una escala demasiado fina. Una etiqueta de 15px junto a un valor de 16px parece un defecto de renderizado, no un nivel. Mejor una proporción que unos números elegidos a mano: un factor de 1,2 a 1,25 entre pasos contiguos aguanta en el móvil y en un monitor de 27 pulgadas. El argumento completo está en escala tipográfica para UI de producto.

2. Peso, con saltos de 200 o más

El peso tipográfico es el canal más desaprovechado en interfaces neutras. A 14px, 400 junto a 500 no se ve. 400 junto a 600 no se confunde. Dos pesos suelen cubrir un producto entero: uno para lo que estás nombrando, otro para todo lo que lo acompaña. Tres son un sistema. Cuatro son algo que al sexto mes ya nadie revisa.

El peso tiene una ventaja que el tamaño no tiene: no cambia el layout. Puedes ascender una etiqueta sin recolocar la fila entera.

3. Valor, escrito como proporción y no como código hexadecimal

El valor es la claridad. Es la parte del color que sobrevive a la desaturación y la única que mide de verdad un medidor de contraste. Asigna a cada papel del texto una proporción objetivo en lugar de un gris favorito: texto primario a 12:1 o más, secundario en torno a 7:1, terciario a 4,5:1 como suelo. Las proporciones convierten los grises en decisiones. Quien quiera un cuarto nivel tendrá que discutir contra un número, y el medidor de contraste de WebAIM zanja la conversación en diez segundos.

4. Espacio, el énfasis más barato del archivo

La proximidad agrupa, la distancia separa. Un elemento con 48px de aire dentro de un layout denso pesa más que otro mayor apretado contra un borde. El espacio es también lo primero que se recorta cuando la pantalla se llena, justo al revés de lo que conviene: cuanta más densidad, más trabajo hace cada hueco que queda.

Un aviso, de naturaleza óptica y no matemática. Distancias iguales en píxeles a menudo no parecen iguales, sobre todo alrededor de iconos y de textos con pesos distintos. Los casos concretos están en alineación óptica.

5. Posición

Se lee con patrones previsibles, con más peso arriba a la izquierda en los layouts que van de izquierda a derecha. Un elemento que llega primero no necesita ser más grande. La posición es el único canal que los tokens no saben expresar, así que la decide quien montó la retícula y luego nadie vuelve sobre ella. Conviene volver: subir la acción principal por encima del pliegue gana a cualquier estilo aplicado donde está ahora.

6. Separar superficies: borde, relleno o sombra

Tres formas de decir "aquí empieza un contenedor", y no son intercambiables. Un borde de 1px a 3:1 es preciso, barato y aguanta en los dos temas. Un relleno a un paso del fondo es más silencioso y anida bien. La sombra sugiere superposición física y se degrada en tema oscuro: por eso Material Design 3 movió casi toda la elevación a colores de superficie tonales y dejó las sombras para los componentes que se superponen de verdad, como diálogos y paneles.

Uno por nivel de anidamiento. Una tarjeta con borde, relleno y sombra dice lo mismo tres veces, y la tercera se come contraste que vas a necesitar en otro sitio.

7. Densidad y forma

Altura de fila, radio de esquina, grosor de icono. Por separado son señales débiles, combinadas sirven: una fila de tabla de 32px junto a una fila de ajustes de 56px le dice al usuario que ha cambiado de modo sin escribir una palabra. Mantén corto el vocabulario. Dos densidades y dos radios bastan para casi cualquier producto, y cada valor de más es una cosa más que vigilar.

Cómo se ve en una pantalla real

Coge una página de ajustes: título de sección, etiqueta de campo, valor actual, línea de ayuda, acción destructiva. Construida sobre el color, esa página tiene un título azul, un enlace azul y un botón rojo, y el ojo cae primero en el botón rojo, que es lo último que querrías.

Esta es la versión neutra, cinco papeles, ningún acento. Título de sección a 20px, peso 600, contraste 14:1. Etiqueta de campo a 14px, peso 500, contraste 7:1. Valor actual a 14px, peso 400, contraste 12:1, a propósito más oscuro que su etiqueta, porque el valor es el contenido y la etiqueta es el andamio. Línea de ayuda a 13px, peso 400, contraste 4,5:1. Acción destructiva a 14px, peso 500, gris neutro, con el rojo reservado para el diálogo de confirmación, donde se toma la decisión de verdad.

Cinco niveles distinguibles con dos grises más el blanco y el negro. El acento queda en reserva para el único momento en que significa algo. El color rinde más cuando escasea, y una pantalla montada así aguanta cuando cambia el tema, cuando cambia la marca y cuando quien mira no distingue tu verde de tu rojo.

Cómo revisar una pantalla en diez minutos

Tres pasadas, en este orden. Desatura una captura: si el orden de lectura se cae, el tono estaba haciendo trabajo estructural. Entorna los ojos hasta desenfocar el layout: lo que sigue legible es la jerarquía que percibe el usuario, y debería coincidir con la que diseñaste. Después mide el contraste de cada papel de texto y de cada borde contra su propio fondo, no contra el blanco, porque un borde sobre una tarjeta gris es una medida distinta del mismo borde sobre la página.

Hazlo en las dos o tres pantallas más visitadas, no en la librería de componentes. Con tokens limpios se publican igualmente pantallas planas si nadie mira la composición después del montaje. La misma disciplina vale para los estados que casi todos se saltan, de los que hablamos en diseño de estados vacíos.