Fundo (background)

A camada visual atras do conteudo, que define foco, tom e legibilidade.

Hard

O que é

Fundo e a camada visual que fica atras de todo o resto. Ele e a tela onde os outros elementos se apoiam e define profundidade, tom e enfase. Trabalha em silencio, mas muda bastante como a pessoa le e interage com a interface.

Vale lembrar que o fundo nao e so estetica, e funcao. Um fundo bem escolhido garante contraste pra o texto e os botoes ficarem legiveis. Por isso uma ferramenta de produtividade costuma usar fundo neutro, pra a pessoa focar no conteudo, enquanto um app de musica usa fundo escuro pra a capa do album saltar.

O ponto mais critico aqui e a acessibilidade. O fundo precisa de contraste suficiente com o texto, dentro do que a WCAG pede. E vale cuidado com imagem pesada de fundo, que atrasa o carregamento e acaba prejudicando a experiencia.

Em uma frase

Esse texto cinza-claro reprova no contraste com o fundo; vamos escurecer até passar na WCAG.

A pergunta que ele responde

Como eu escolho o fundo pra dar foco ao conteúdo sem prejudicar a leitura do texto?

Quando usar

Ajuda na hora de definir hierarquia, garantir legibilidade e dar foco ao conteudo certo.

Como não usar

O cuidado e nao usar imagem ou gradiente carregado que rouba a leitura do texto e ainda pesa no carregamento.

Na prática

Imagine um texto cinza-claro sobre fundo branco que reprova no contraste. A correcao e simples: voce escurece o texto ate ele passar na WCAG.

Não confunda com

Vale separar fundo de primeiro plano. O fundo e a camada de tras que da contexto, enquanto o primeiro plano e o conteudo e os controles com que a pessoa interage de verdade.

D

Em inglês

Background

Pronúncia

bec-graund

Também chamado de

background, fundo, plano de fundo

Origem

n/a

Fonte

Saiba mais

W3C, WCAG sobre contraste de cor