Cor de fundo do modo claro: por que #FFFFFF não basta e 8 cores para usar
Uma tela toda branca não tem onde colocar profundidade. A cor de fundo do modo claro a usar no lugar (#F2F2F7 atrás de cards brancos), os textos mais suaves, o destaque mais profundo e os 8 códigos para entregar ao seu dev.
A melhor cor de fundo do modo claro não é #FFFFFF. Coloque a página num cinza suave como #F2F2F7 e guarde o branco para os cards que ficam por cima, para que as superfícies tenham de onde se erguer. Veja por que uma tela toda branca falha, as três correções e as oito cores para entregar ao seu dev.
Por que uma tela toda branca fica chapada
A maioria dos designers começa o modo claro pintando tudo de branco. É o preenchimento padrão de toda ferramenta de design e o fundo padrão de todo navegador, então parece neutro. Não é. É a única escolha que tira a sua capacidade de mostrar profundidade.
Um card precisa parecer diferente da página onde está. Quando os dois são #FFFFFF, a única forma de separá-los é uma borda ou uma sombra, e esses dois detalhes acabam fazendo todo o trabalho. Some mais alguns cards e a tela vira uma grade de contornos.
O modo escuro já resolveu isso. Lá, uma superfície mais clara significa uma superfície mais alta, então cada camada é um degrau mais clara que a de baixo. Nosso paper sobre sistemas de cores do modo escuro cobre essa escala, e design de modo escuro cobre o resto da paleta. O modo claro não tem degrau mais claro acima do branco, então precisa de outra jogada: baixar o chão.
Correção 1: comece a página em #F2F2F7
Página e cards ambos #FFFFFF
Página #F2F2F7, cards #FFFFFF
#F2F2F7 é o cinza que o iOS coloca atrás das listas agrupadas. É o system gray 6 da Apple no modo claro, e a orientação da própria Apple é usar as cores de fundo agrupadas para table views agrupadas. Ajustes é o exemplo clássico: página cinza clara, linhas brancas.
Essa única mudança dá um chão e um teto. A página é o chão, cards e sheets são o teto, e o espaço entre eles é visível sem desenhar uma única linha.
Onde aplicar:
- O fundo da página, atrás de toda tela que tem cards, listas ou seções.
- Listas agrupadas e telas de configurações, onde as linhas são brancas e os vãos são cinza.
- Inputs dentro de um card branco, que podem ficar no cinza da página para parecerem rebaixados.
Se a sua tela é um artigo branco longo sem nenhum card, o branco serve. A regra vale para interfaces feitas de superfícies.
Correção 2: deixe as sombras fazerem o trabalho de elevar
No modo escuro, elevação é uma cor mais clara. No modo claro, as superfícies continuam brancas e a sombra cresce. Um card em repouso ganha uma sombra pequena e suave; um menu ou diálogo que flutua acima dele ganha uma maior e mais suave.
Dois hábitos fazem isso ficar certo:
- Tinja a sombra com a sua tinta, não com preto puro. Uma sombra na cor do texto (o post usou #1B1530, um violeta profundo) parece parte da interface. Preto puro parece uma mancha.
- Faça maior significar mais alto. Use uma escala curta de quatro, de pequeno a grande, e associe cada nível a uma função: card, card elevado, menu, diálogo. Depois nunca invente um quinto.
/* A starting point, not a platform spec. Tune the values to your brand. */
:root {
--shadow-ink: 27 21 48; /* #1B1530 */
--shadow-sm: 0 1px 2px rgb(var(--shadow-ink) / 0.08);
--shadow-md: 0 4px 12px rgb(var(--shadow-ink) / 0.10);
--shadow-lg: 0 12px 32px rgb(var(--shadow-ink) / 0.14);
}
.card { background: #FFFFFF; box-shadow: var(--shadow-sm); }
.menu { background: #FFFFFF; box-shadow: var(--shadow-md); }
.dialog { background: #FFFFFF; box-shadow: var(--shadow-lg); }
A página cinza é o que faz isso funcionar. Numa página branca, uma sombra suave é quase invisível, então as pessoas compensam com uma sombra mais escura ou uma borda. Sobre #F2F2F7, uma sombra leve basta.
Correção 3: suavize o preto e depois aprofunde o destaque
Texto #000000 puro numa página branca ou quase branca é mais duro do que precisa ser, e faz toda outra cor parecer fraca ao lado. O Material 3 define o texto claro um degrau mais suave.
Texto
Texto secundário
Desabilitado, 38 por cento
- #1D1B20 para texto. É a cor on-surface do Material 3. É quase preto com um toque de violeta, que combina bem com branco e com cinza.
- #49454F para texto secundário, como legendas, linhas de ajuda e horários. Continua fácil de ler e claramente mais quieto que o texto principal.
- A mesma tinta a 38 por cento para rótulos e ícones desabilitados. Sobre branco, isso dá #A9A8AA, e o Material usa exatamente essa opacidade. Texto desabilitado é o único lugar onde baixo contraste é o objetivo, e a WCAG o isenta.
O destaque precisa da correção oposta. Uma cor de marca clara e viva que ficava ótima numa tela escura desaparece no branco.
Destaque claro no branco
Destaque profundo no branco
#BB86FC é o roxo base do Material para temas escuros. No branco ele quase some, o que é um problema para qualquer coisa que precise parecer um botão ou um link.
#6200EE é o roxo base do Material para temas claros, da mesma família, profundo o bastante para se sustentar. Ao montar um tema claro, não reuse o destaque do tema escuro. Escolha o degrau mais profundo do mesmo matiz.
As 8 cores do modo claro
Toque em qualquer chip para copiar o código.
| Papel | Valor | Use para |
|---|---|---|
| Base | #F2F2F7 | A página, atrás de cards e listas agrupadas |
| Cards | #FFFFFF | Cards, sheets, menus, linhas |
| Divisores | #E5E5EA | Linhas entre linhas. Não para bordas de input |
| Texto | #1D1B20 | Títulos e corpo |
| Secundário | #49454F | Legendas, texto de ajuda, horários |
| Desabilitado | #A9A8AA | Rótulos e ícones desabilitados (texto a 38 por cento) |
| Primária | #6200EE | Botões, links, estados selecionados |
| Erro | #B00020 | Texto, bordas e ícones de erro |
#E5E5EA é o system gray 5 do iOS, e funciona para divisores porque um divisor só precisa ser notado, não lido. A borda de um campo precisa de mais que isso. Nosso paper sobre placeholders e labels traz a cor de borda a usar no lugar.
Entregue isto ao seu dev
As mesmas oito cores como propriedades customizadas de CSS:
:root {
--color-base: #F2F2F7;
--color-card: #FFFFFF;
--color-divider: #E5E5EA;
--color-text: #1D1B20;
--color-text-secondary: #49454F;
--color-text-disabled: #A9A8AA;
--color-primary: #6200EE;
--color-error: #B00020;
}
body { background: var(--color-base); color: var(--color-text); }
.card { background: var(--color-card); }
.caption { color: var(--color-text-secondary); }
.card + .card { margin-top: 12px; }
hr { border: 0; border-top: 1px solid var(--color-divider); }
Se você também entrega um tema escuro, dê a cada um desses nomes um segundo valor dentro de @media (prefers-color-scheme: dark), como no mapa de tokens do modo escuro. Os nomes ficam iguais e só os valores mudam, o que impede o modo claro de virar "modo escuro, invertido".
Os números por trás de "fácil de ver"
O post diz "fácil de ver" e "difícil de ver". Para quem precisa defender a escolha numa revisão, aqui estão os números (razões de contraste WCAG 2, calculadas sobre branco):
| Par | Contraste | Veredito |
|---|---|---|
| Texto #1D1B20 em #FFFFFF | 17,1 para 1 | Muito acima do mínimo de 4,5 para 1 |
| Texto #49454F em #FFFFFF | 9,3 para 1 | Confortável para texto secundário |
| Desabilitado #A9A8AA em #FFFFFF | 2,4 para 1 | Isento, desabilitado deve ser discreto |
| #BB86FC em #FFFFFF | 2,65 para 1 | Abaixo dos 3 para 1 que a forma de um botão precisa |
| #6200EE em #FFFFFF | 7,63 para 1 | Fácil de ver |
Um fato a mais que vale saber: a superfície clara do próprio Material 3 também não é #FFFFFF. É #FEF7FF, um branco com um tom quase imperceptível. Até o design system que a maioria das equipes trata como padrão não pinta a tela de branco puro.
FAQ
Qual é a melhor cor de fundo para o modo claro?
Um cinza claro suave como #F2F2F7 para a página, com #FFFFFF para os cards por cima. O cinza dá às superfícies brancas algo de onde se destacar, então você precisa de menos bordas e sombras.
#FFFFFF é uma cor de fundo ruim?
Nem sempre, mas uma tela toda branca não tem como mostrar profundidade. Os cards se dissolvem na página, e bordas e sombras acabam fazendo todo o trabalho. O branco funciona melhor como cor das superfícies, não da tela inteira.
O que é #F2F2F7?
É o system gray 6 do iOS no modo claro, o cinza que a Apple usa atrás de listas agrupadas, como no app Ajustes. A Apple recomenda as cores de fundo agrupadas para table views agrupadas.
Que cor de texto devo usar sobre fundo branco?
Um quase preto suave como #1D1B20 para o texto e #49454F para o texto secundário. Ambas são cores do Material 3 e ambas são fáceis de ler sobre branco e sobre #F2F2F7.
Como mostrar elevação no modo claro?
Com sombras. No modo escuro, uma superfície mais clara significa uma mais alta, mas o modo claro não tem degrau mais claro acima do branco, então as superfícies continuam brancas e a sombra cresce com a altura.
A cor de destaque deve mudar entre o modo claro e o escuro?
Sim. Um destaque claro como #BB86FC funciona em telas escuras, mas quase desaparece no branco. Use um degrau mais profundo do mesmo matiz, como #6200EE, nas superfícies claras.
Fontes
- Apple Human Interface Guidelines, Color: #F2F2F7 é systemGray6 no modo claro (R242 G242 B247), e as cores de fundo agrupadas são pensadas para table views agrupadas.
- Papéis de cor do Material 3, lidos em androidx Compose ColorLightTokens e PaletteTokens: on surface #1D1B20 (Neutral10), on surface variant #49454F (NeutralVariant30), surface clara #FEF7FF. Veja os papéis de cor do Material.
- Opacidade de 0,38 para rótulos e ícones desabilitados, dos component tokens do Material 3. #1D1B20 a 38 por cento sobre #FFFFFF é #A9A8AA.
- #BB86FC e #6200EE são os primários base escuro e claro do Material. #B00020 é o erro base claro do Material. #E5E5EA é o system gray 5 do iOS no modo claro.
- WCAG 2.2, 1.4.3 Contrast (Minimum) e 1.4.11 Non-text Contrast. Razões calculadas com a fórmula de luminância relativa da WCAG. Texto desabilitado é isento do mínimo.
- A tinta de sombra #1B1530 e os quatro níveis de sombra são recomendação nossa, não um valor de plataforma.
- Publicado originalmente como carrossel no UX Brainy.
Want a light and a dark theme designed as one system, not a theme and its inversion? Our team builds product UI and design systems that hold up in both.
Get Started
