Color del divisor en UI: por qué los divisores no son #000000
Una línea negra pura entre filas de una lista grita más que las palabras que separa. Usa #C6C6C8 en claro, #38383A en oscuro, 1 px, con sangría hasta el texto, y prueba con espacio antes de dibujar cualquier línea.
El color correcto para un divisor es un gris claro suave como #C6C6C8, de 1 px de grosor y con sangría hasta el texto, no una línea negra pura. Un divisor existe para separar filas, y uno negro se convierte en lo más ruidoso de la lista. Aquí tienes las cuatro correcciones, con los valores para pantallas claras y oscuras.
Por qué los divisores negros gritan
Nadie elige un divisor negro a propósito. Una línea dibujada sin pensar sale #000000, y se queda así hasta que alguien la cambia.
El problema es el contraste. El negro puro sobre blanco es la pareja más fuerte que puede mostrar una pantalla, y el texto de tus filas suele ser algo más suave. Así que la línea gana a las palabras. El ojo lee primero las líneas y luego se pone a buscar el contenido entre ellas.
Un divisor es una pista, no una función estrella. Su trabajo es que el ojo lo encuentre cuando lo necesite e ignorarlo el resto del tiempo.
Corrección 1: aclara las líneas
Líneas #000000
Líneas #C6C6C8
iOS dibuja los separadores de lista en #C6C6C8 sobre blanco, que es el color de separador semitransparente del sistema asentado sobre un fondo blanco. Material 3 llega al mismo punto con #CAC4D0, su token de outline variant, a 1 dp.
Línea negra
Separador iOS
Divisor Material 3
12% negro sobre blanco
Si tu fondo no es blanco liso, usa un valor alfa en lugar de un gris fijo. Las guías de Material describen los divisores como negro al 12% en temas claros y blanco al 12% en temas oscuros. #000000 al 12% sobre blanco se renderiza como #E0E0E0, y sobre una superficie teñida se mantiene teñido, así que la línea nunca parece pegada.
La misma corrección sirve fuera de las listas: reglas de filas de tabla, pies de tarjeta, la línea bajo un encabezado y la regla entre grupos de un menú.
Corrección 2: dales sangría hasta el texto
Ancho completo
Empieza en el texto
Abre Ajustes en un iPhone y míralo. La línea empieza en la etiqueta, no bajo el icono. Material dice lo mismo: los divisores con sangría separan contenido relacionado, y se combinan con elementos de anclaje como los avatares.
Esa sangría es lo que une un icono a su fila. Una línea de ancho completo bajo el icono lo suelta, y la lista se lee como rayas en lugar de filas.
Desde iOS 16, las listas de SwiftUI alinean cada separador con el borde inicial del texto de la fila, no con su icono. Si tus filas no tienen icono ni avatar, no hay nada alrededor de lo que dar sangría, y una línea de ancho completo está bien.
Corrección 3: prueba primero con espacio
Una línea por fila
El espacio lo resuelve
Antes de recurrir a una línea, pregúntate para qué sirve. A menudo es para agrupar, y agrupar se puede hacer con distancia. Material enumera alternativas a los divisores de borde a borde: espacio en blanco, subencabezados y divisores con sangría, y advierte que abusar de los de borde a borde crea ruido visual. Refactoring UI defiende lo mismo bajo "usa menos bordes": separa las cosas con espacio, un color de fondo o una sombra.
Una prueba rápida es borrar todas las líneas de tu lista. Si aún ves los grupos, las líneas eran decoración.
Corrección 4: atenúalas también en oscuro
#FFFFFF sobre #1C1C1E
#38383A sobre #1C1C1E
La regla no cambia en modo oscuro, se invierte. En una pantalla clara la línea es un poco más oscura que la superficie, y en una oscura es un poco más clara.
iOS usa #38383A sobre el fondo oscuro de sus listas. Material 3 usa #49454F, su outline variant oscuro, sobre una superficie #141218.
Las líneas blancas puras tienen el mismo problema que las negras puras: son las marcas más brillantes de la lista, así que vencen al texto.
La especificación del divisor
Toca cualquier chip para copiar su código.
| Propiedad | Valor | Por qué |
|---|---|---|
| Color, claro | #C6C6C8 | Visible cuando miras, discreto cuando lees |
| Opción alfa | #000000 al 12% | Se adapta a cualquier superficie, se renderiza #E0E0E0 sobre blanco |
| Grosor | 1 px (1 dp) | Las líneas más gruesas se vuelven formas |
| Sangría | Empezar en el texto | Mantiene iconos y avatares unidos a sus filas |
| Color, oscuro | #38383A | Un poco más claro que la superficie, nunca blanco |
| Espacio | Pruébalo primero | Agrupa sin dibujar nada |
Pásale esto a tu desarrollador
:root {
--divider: #C6C6C8;
}
@media (prefers-color-scheme: dark) {
:root {
--divider: #38383A;
}
}
.row + .row {
border-top: 1px solid var(--divider);
margin-left: 56px; /* icon width plus gap, so the line starts at the text */
}
.group + .group {
margin-top: 24px; /* try this before adding a line */
}
El margin-left sobre el borde es la sangría: la línea empieza donde empieza la etiqueta. Si usas el enfoque alfa, reemplaza la variable por rgba(0, 0, 0, 0.12) en claro y rgba(255, 255, 255, 0.12) en oscuro.
FAQ
¿De qué color deben ser los divisores?
Un gris claro suave en pantallas claras, como el #C6C6C8 de iOS o el #CAC4D0 de Material 3. En pantallas oscuras usa un gris oscuro ligeramente más claro, como #38383A.
¿Deben ser negros los divisores?
No. Una línea negra pura es la marca de mayor contraste de la lista, así que el ojo la lee antes que el contenido. Usa un gris claro o negro a cerca del 12% de opacidad.
¿Qué grosor debe tener un divisor?
1 px, que es 1 dp en Material. Las líneas más gruesas se convierten en formas y compiten con las filas.
¿Qué es un divisor con sangría?
Un divisor que empieza en el texto de la fila en lugar del borde de la pantalla, para no cortar por debajo de un icono o avatar. Ajustes de iOS lo usa en todas sus listas.
¿Necesito divisores entre todas las filas?
No siempre. Un hueco mayor entre grupos suele separar el contenido sin dibujar nada, y Material advierte que abusar de los divisores de ancho completo crea ruido visual.
¿Qué color de divisor funciona en modo oscuro?
#38383A sobre el fondo oscuro de las listas de iOS y #49454F sobre la superficie oscura de Material 3. Evita el blanco, porque las líneas brillantes deslumbran en pantallas oscuras.
Fuentes
- Material Design 2, Dividers: los divisores miden 1 dp de grosor con negro al 12% en temas claros o blanco al 12% en temas oscuros; los divisores con sangría separan contenido relacionado y funcionan con elementos de anclaje como los avatares; las alternativas a los divisores de borde a borde incluyen espacio en blanco, subencabezados y divisores con sangría; el abuso de divisores de borde a borde crea ruido visual.
- Material 3 tokens: el divisor usa el color outline variant con 1.0 dp de grosor; el valor base es #CAC4D0 en el esquema claro y #49454F en el oscuro. #141218 es la superficie oscura base.
- Apple, listRowSeparatorLeading y Adjust List Row Separator Insets: desde iOS 16 las listas alinean cada separador con el borde inicial del texto de la fila por defecto.
- Colores de separador de iOS: claro rgba(60, 60, 67, 0.29), que sobre blanco queda como #C6C6C8, y #38383A en oscuro. La app Ajustes del iPhone muestra la sangría.
- #000000 al 12% sobre #FFFFFF se renderiza como #E0E0E0, calculado por mezcla alfa.
- Refactoring UI, "Use fewer borders" (Adam Wathan y Steve Schoger).
- WCAG 2.2, 1.4.11 Non-text Contrast: un divisor entre filas de lista es decoración, no es necesario para entender el contenido, así que no se le aplica ningún contraste mínimo.
- Las filas de Ajustes y los detalles del evento "Design review" están inventados para esta página.
- Publicado por primera vez como carrusel en UX Brainy.
Want lists, forms and every other surface designed as one quiet system? Our team designs and builds product UI that holds up in light and dark.
Get Started
