Cor do divisor na UI: por que divisores não são #000000
Uma linha preta pura entre linhas de lista grita mais alto que as palavras que ela separa. Use #C6C6C8 no claro, #38383A no escuro, 1 px, recuada até o texto, e tente usar espaço antes de desenhar qualquer linha.
A cor certa para um divisor é um cinza claro e suave, como #C6C6C8, desenhado com 1 px de espessura e recuado até o texto, não uma linha preta pura. Um divisor existe para separar linhas, e um preto vira a coisa mais barulhenta da lista. Aqui estão as quatro correções, com os valores para telas claras e escuras.
Por que divisores pretos gritam
Ninguém escolhe um divisor preto de propósito. Uma linha desenhada sem pensar sai #000000 e fica assim até alguém mudar.
O problema é o contraste. Preto puro sobre branco é o par mais forte que uma tela consegue mostrar, e o texto das suas linhas costuma ser um pouco mais suave que isso. Então a linha ganha das palavras. O olho lê as linhas primeiro e depois vai procurar o conteúdo entre elas.
Um divisor é uma dica, não uma atração principal. Sua função é ser encontrado pelo olho quando necessário e ignorado o resto do tempo.
Correção 1: clareie as linhas
Linhas #000000
Linhas #C6C6C8
O iOS desenha os separadores de lista em #C6C6C8 sobre branco, que é a cor de separador semitransparente do sistema assentada num fundo branco. O Material 3 chega ao mesmo lugar com #CAC4D0, seu token outline variant, a 1 dp.
Linha preta
Separador iOS
Divisor Material 3
12% de preto sobre branco
Se o seu fundo não é branco puro, use um valor alfa em vez de um cinza fixo. As diretrizes do Material descrevem divisores como 12% de preto em temas claros e 12% de branco em temas escuros. #000000 a 12% sobre branco renderiza #E0E0E0 e, sobre uma superfície tingida, continua tingido, então a linha nunca parece colada.
A mesma correção vale fora das listas: linhas de tabela, rodapés de card, a linha sob um cabeçalho e a divisória entre grupos de menu.
Correção 2: recue até o texto
Largura total
Começa no texto
Abra os Ajustes num iPhone e olhe. A linha começa no rótulo, não sob o ícone. O Material diz a mesma coisa: divisores recuados separam conteúdo relacionado e combinam com elementos de ancoragem, como avatares.
Esse recuo é o que prende o ícone à sua linha. Uma linha de largura total sob o ícone o solta, e a lista vira listras em vez de linhas.
Desde o iOS 16, as listas do SwiftUI alinham cada separador à borda inicial do texto da linha por padrão, não ao ícone. Se suas linhas não têm ícone nem avatar, não há em torno de que recuar, e uma linha de largura total funciona bem.
Correção 3: tente espaço primeiro
Uma linha por item
O espaço resolve
Antes de apelar para uma linha, pergunte para que ela serve. Muitas vezes é agrupamento, e agrupar dá para fazer com distância. O Material lista alternativas aos divisores de borda a borda: espaço em branco, subcabeçalhos e divisores recuados, e avisa que abusar dos de borda a borda cria ruído visual. O Refactoring UI faz o mesmo argumento em "use fewer borders": separe as coisas com espaço, cor de fundo ou sombra.
Um teste rápido é apagar todas as linhas da lista. Se você ainda enxerga os grupos, as linhas eram decoração.
Correção 4: suavize também no escuro
#FFFFFF sobre #1C1C1E
#38383A sobre #1C1C1E
A regra não muda no modo escuro, ela inverte. Numa tela clara, a linha é um pouco mais escura que a superfície; numa escura, é um pouco mais clara.
O iOS usa #38383A no fundo escuro de suas listas. O Material 3 usa #49454F, seu outline variant escuro, sobre uma superfície #141218.
Linhas brancas puras têm o mesmo problema das pretas: são as marcas mais brilhantes da lista, então vencem o texto.
A especificação do divisor
Toque em qualquer chip para copiar o código.
| Propriedade | Valor | Por quê |
|---|---|---|
| Cor, claro | #C6C6C8 | Visível quando você olha, discreto quando você lê |
| Opção alfa | #000000 a 12% | Se adapta a qualquer superfície, renderiza #E0E0E0 sobre branco |
| Espessura | 1 px (1 dp) | Linhas mais grossas viram formas |
| Recuo | Começar no texto | Mantém ícones e avatares presos às suas linhas |
| Cor, escuro | #38383A | Um pouco mais clara que a superfície, nunca branca |
| Espaço | Tente primeiro | Agrupa sem desenhar nada |
Entregue isto ao seu dev
: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 */
}
O margin-left na borda é o recuo: a linha começa onde o rótulo começa. Se você usar a abordagem alfa, troque a variável por rgba(0, 0, 0, 0.12) no claro e rgba(255, 255, 255, 0.12) no escuro.
FAQ
Que cor os divisores devem ter?
Um cinza claro e suave em telas claras, como o #C6C6C8 do iOS ou o #CAC4D0 do Material 3. Em telas escuras, use um cinza escuro um pouco mais claro, como #38383A.
Divisores devem ser pretos?
Não. Uma linha preta pura é a marca de maior contraste da lista, então o olho a lê antes do conteúdo. Use um cinza claro ou preto com cerca de 12% de opacidade.
Qual deve ser a espessura de um divisor?
1 px, que é 1 dp no Material. Linhas mais grossas viram formas e competem com as linhas da lista.
O que é um divisor recuado?
Um divisor que começa no texto da linha em vez da borda da tela, para não cortar sob um ícone ou avatar. Os Ajustes do iOS o usam em todas as listas.
Preciso de divisores entre todas as linhas?
Nem sempre. Um espaço maior entre grupos muitas vezes separa o conteúdo sem desenhar nada, e o Material avisa que abusar de divisores de largura total cria ruído visual.
Que cor de divisor funciona no modo escuro?
#38383A no fundo escuro de listas do iOS e #49454F na superfície escura do Material 3. Evite branco, porque linhas brilhantes ofuscam em telas escuras.
Fontes
- Material Design 2, Dividers: divisores têm 1 dp de espessura com 12% de preto em temas claros ou 12% de branco em temas escuros; divisores recuados separam conteúdo relacionado e funcionam com elementos de ancoragem, como avatares; alternativas aos divisores de borda a borda incluem espaço em branco, subcabeçalhos e divisores recuados; o uso excessivo de divisores de borda a borda cria ruído visual.
- Material 3 tokens: o divisor usa a cor outline variant com 1,0 dp de espessura; o valor base é #CAC4D0 no esquema claro e #49454F no escuro. #141218 é a superfície escura base.
- Apple, listRowSeparatorLeading e Adjust List Row Separator Insets: desde o iOS 16, as listas alinham cada separador à borda inicial do texto da linha por padrão.
- Cores de separador do iOS: claro rgba(60, 60, 67, 0.29), que sobre branco resulta em #C6C6C8, e #38383A no escuro. O app Ajustes do iPhone mostra o recuo.
- #000000 a 12% sobre #FFFFFF renderiza #E0E0E0, calculado por mistura alfa.
- Refactoring UI, "Use fewer borders" (Adam Wathan e Steve Schoger).
- WCAG 2.2, 1.4.11 Non-text Contrast: um divisor entre linhas de lista é decoração, não é necessário para entender o conteúdo, então nenhum contraste mínimo se aplica a ele.
- As linhas de Ajustes e os detalhes do evento "Design review" foram inventados para esta página.
- Publicado originalmente como carrossel no 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
