Borde o sombra en la interfaz: cuándo usar cada uno y cuándo un fondo

Separar las zonas de una interfaz es indicar al usuario dónde termina una región y dónde empieza la siguiente. Hay cuatro recursos para hacerlo: el espacio, un fondo (un cambio de tono), un borde y una sombra. Cada uno dice algo distinto. El borde marca un límite. El fondo marca un lugar distinto. La sombra marca una capa que está por encima del resto. Si se elige el equivocado, o se ponen los tres en la misma tarjeta, un layout limpio se llena de ruido.

Aquí comparamos borde, sombra y fondo en lo que decide una pantalla real: qué comunica cada uno, cómo se comporta en modo oscuro y en el modo de colores forzados de Windows, y qué norma de accesibilidad le afecta. Al final, el orden en que los probamos y los pocos tokens que mantenemos.

¿Por qué las separaciones se vuelven ruido tan rápido?

Un límite es una señal fuerte. El artículo de Nielsen Norman Group sobre el principio de región común explica que un límite claro se impone a los demás criterios de agrupación, como la proximidad o la semejanza. El mismo texto advierte que los bordes se añaden a menudo por precaución, cuando el espacio ya bastaba para agrupar el contenido, y que el resultado es una pantalla recargada.

El ruido se acumula. Una tarjeta con borde, sombra y fondo tintado usa tres señales para decir una sola cosa. Pon doce sobre una página gris, dentro de un panel con borde, y la pantalla muestra decenas de límites antes de que se lea una palabra. Casi nunca hace falta un estilo nuevo. Hacen falta menos señales, cada una con su función.

Borde, sombra o fondo: la respuesta corta

Primero, el espacio. El fondo, para distinguir regiones grandes. El borde, donde un límite tiene que ser preciso o tiene que resistir los ajustes de accesibilidad: campos de formulario, tablas, separadores. La sombra, solo para lo que queda encima de otro contenido: menús, popovers, diálogos, toasts. Un elemento que necesita dos señales casi nunca necesita una tercera.

Material Design 3 deja ver la misma decisión en un solo componente. Sus pautas para tarjetas definen tres tipos, elevated, filled y outlined: una sombra, un fondo y un borde, como alternativas. Ninguno de los tres los combina.

¿Cómo se comparan borde, sombra y fondo?

• Qué comunica. Borde: aquí hay un límite. Fondo: esta es otra región. Sombra: esta capa está sobre la página, y la página sigue debajo.
• Dónde encaja. Borde: campos, tablas, separadores de lista, indicadores de foco. Fondo: barras laterales, secciones, tarjetas sobre una página tintada. Sombra: menús, popovers, diálogos, toasts, una cabecera cuando la página se desplaza por debajo.
• Modo oscuro. Borde: funciona con un tono más claro. Fondo: funciona, y más claro significa más alto. Sombra: débil, porque una sombra oscura sobre un fondo oscuro apenas tiene qué oscurecer.
• Colores forzados. Borde: se mantiene, con un color del sistema. Fondo: lo sustituye el fondo del sistema. Sombra: desaparece.
• Densidad. Borde: una línea por elemento, pesado en listas largas. Fondo: ninguna línea, siempre que la diferencia de tono se vea. Sombra: se mezcla con las vecinas cuando los elementos están juntos.

¿Cuándo gana el borde?

Campos de formulario

El criterio de conformidad 1.4.11 de las WCAG 2.2, Contraste no textual, pide una relación de contraste de 3:1 para la información visual necesaria para identificar un componente de interfaz. La explicación del W3C sobre el 1.4.11 precisa cuándo cuenta un límite: un botón con texto legible no necesita un borde visible, porque el texto ya lo identifica. El campo de texto es el caso contrario. Vacío, sin texto y a menudo sin icono, solo tiene el borde para indicar que existe. El ejemplo del W3C que cumple es un borde gris #767676 sobre una página blanca. Un borde pálido a 1,5:1, elegante en el mockup, no cumple.

Tablas y listas densas

Un separador de 1 px divide las filas en menos altura que cualquier hueco que haga el mismo trabajo. En una tabla de cuarenta filas esa diferencia decide cuántas caben en la primera pantalla. Lo tratamos en tabla de datos o tarjetas: cuando el usuario compara valores entre filas, las líneas finas y las filas alternas ganan a una cuadrícula de tarjetas.

Todo lo que debe funcionar con colores forzados

Los temas de contraste de Windows activan en el navegador el modo de colores forzados. La especificación CSS Color Adjustment enumera lo que ocurre: box-shadow pasa a none, los colores de fondo se sustituyen por el fondo del sistema y todos los demás colores, los de los bordes incluidos, se fuerzan a colores del sistema. Un desplegable dibujado solo con sombra, o una tarjeta dibujada solo con fondo, pierde el límite por completo. El borde se queda.

El arreglo habitual cabe en una línea. A los contenedores que dependen solo de la sombra o del fondo se les da border: 1px solid transparent. En la vista normal el borde no se ve. Con colores forzados, transparent no es un color del sistema, así que el navegador lo repinta con uno y el límite vuelve. Para los casos que piden más, MDN documenta la media query forced-colors.

¿Cuándo gana la sombra?

Cuando hay superposición. De las tres señales, la sombra es la única que dice que un elemento está sobre la página y que la página continúa debajo. Es justo el mensaje de un menú, un popover, un diálogo, un toast o una cabecera con contenido desplazándose por debajo. Un borde en un popover marca un límite y nada sobre la profundidad, y el usuario puede tomarlo por parte del layout.

Material 3 describe la elevación como una mezcla de sombras, color tonal y scrims, y ese es el modelo adecuado para un producto. Las sombras, para las capas que flotan. El contenido en reposo toma la profundidad del tono. Si tarjetas, paneles y botones proyectan sombra en reposo, todo flota, y un overlay de verdad ya no tiene con qué destacar.

Dos avisos. En modo oscuro la sombra casi no se ve, así que el overlay necesita un fondo más claro que la página; en el artículo sobre el modo oscuro contextual entramos en la parte tonal. Y pocas sombras: dos tokens (uno para menús y popovers, otro para diálogos) cubren la mayoría de las interfaces SaaS.

¿Cuándo gana el fondo?

En las regiones grandes. Una barra lateral frente al área principal, una sección de ajustes frente a la página, una franja de pie: un cambio de tono las separa sin trazar una sola línea, y por eso los fondos mantienen tranquilas las pantallas densas. El ojo lee un tono distinto como un lugar distinto.

La propia historia de Material muestra cómo debe funcionar una escala de fondos. En marzo de 2023 Material 3 pasó a colores de superficie basados en el tono: cinco roles de contenedor, de Surface Container Lowest a Surface Container Highest, elegidos por su función de contención y ya sin relación con la elevación. La nota de migración de Flutter hace corresponder uno a uno los antiguos niveles tintados con los nuevos roles. La lección para cualquier design system es la escala: un conjunto fijo de tonos, cada uno con su papel, elegidos por significado en lugar de mezclados a mano en cada pantalla. Cinco escalones encajan en una plataforma tan amplia como Android. A un producto web suelen bastarle tres: página, región, hundido.

Los fondos exigen disciplina con el contraste. Dos tonos que se diferencian por muy poco desaparecen en la pantalla apagada de un portátil, y dos demasiado distintos parecen dos aplicaciones. Las WCAG no piden 3:1 entre una barra lateral y el área principal, porque ninguna de las dos es un control. Sí lo piden cuando el fondo es lo único que identifica un control: un campo relleno y sin borde necesita que su fondo llegue a 3:1 frente a lo que lo rodea, la misma regla que el ejemplo del W3C aplica a un campo blanco sobre un panel azul oscuro.

¿Qué falla cuando las señales se acumulan?

• Tres señales en una tarjeta. Borde, sombra y tinte juntos dicen «separado» tres veces. Se deja una. La segunda, solo si la tarjeta está sobre un fondo cargado.
• Sombras en todo, en reposo. Si todo flota, menús y diálogos pierden la única señal que los marca como overlays.
• Cajas dentro de cajas. Una tarjeta con borde dentro de un panel con borde dibuja una línea doble en cada límite compartido. Fuera el borde interior: que agrupe el espacio.
• Bordes pálidos en los campos. Por debajo de 3:1 el campo no cumple el 1.4.11, y a quien ve poco le cuesta encontrarlo.
• Controles hechos solo de sombra o de fondo. Desaparecen con colores forzados. El borde transparente de antes los recupera.
• Sombras del tema claro copiadas en el oscuro. No se ven. En el tema oscuro, la profundidad la da el tono.

Estos fallos suelen aparecer juntos en un producto que ha crecido sin una regla, y explican en parte por qué una interfaz parece poco profesional aunque cada componente, por separado, esté cuidado.

El orden en que los probamos y los tokens que mantenemos

1. Espacio. Si un hueco mayor y un título agrupan el contenido, ahí se para. La guía sobre jerarquía visual sin color reúne los recursos de espaciado y tipografía que hacen casi todo el trabajo.
2. Fondo. Para las regiones que el espacio no separa por sí solo: estructura de la app, secciones, zonas hundidas.
3. Borde. Para los límites que deben ser exactos o resistir los ajustes de accesibilidad: campos, tablas, separadores, foco.
4. Sombra. Para las capas que se superponen a la página, y para nada más.

En los design systems que hacemos, ese orden se convierte en una lista corta de tokens: tres fondos (página, región, hundido), dos colores de borde (uno suave para la estructura y otro de al menos 3:1 para los campos), dos sombras (popover y diálogo) y una regla base que da a cada overlay un borde transparente para los colores forzados. Siete valores y una regla. Los tokens llevan la decisión, así que una pantalla diseñada el año que viene la respeta sin necesidad de una reunión; sobre los tokens que codifican comportamiento y contexto más allá del color escribimos aquí.

Una página de ajustes muestra el conjunto en marcha. La barra lateral va sobre el fondo de región. Cada grupo de ajustes se separa con espacio y un título, sin caja. Los campos llevan el borde a 3:1. El toast de confirmación tras guardar es el único elemento con sombra. Cuatro señales en pantalla, cada una con su función, y solo por los límites el usuario distingue qué partes son lugares, cuáles son controles y cuáles son mensajes que pasan por encima de la página.