Fundo para texto: o que torna as palavras fáceis de ler

Um bom fundo para texto tem três coisas na área atrás das palavras: contraste forte com as letras, muito pouco detalhe fino e uma faixa uniforme de tons, em vez de manchas claras e escuras. A cor importa bem menos do que as pessoas pensam. Um gradiente violeta pode carregar texto lindamente e uma foto cinza pode arruiná-lo, dependendo dessas três propriedades. Este guia mostra como avaliar qualquer fundo, foto, gradiente ou textura e o que fazer quando um deles falha.

Contraste: a primeira propriedade

Contraste é a diferença de luminosidade entre as letras e o que está diretamente atrás delas. As Diretrizes de Acessibilidade para Conteúdo Web (WCAG) definem a régua mensurável: uma taxa de pelo menos 4,5:1 para texto normal e 3:1 para texto grande. O verificador de contraste da WebAIM calcula para quaisquer duas cores.

Numa cor lisa, uma conferência basta. Num gradiente ou numa foto, o fundo muda sob cada palavra, então confira o ponto mais claro atrás do texto claro e o mais escuro atrás do texto escuro. É onde o texto falha primeiro. Contraste de cor e acessibilidade aprofunda os padrões.

Detalhe: por que fundos carregados são difíceis de ler

O contraste é necessário, mas não basta. Um fundo cheio de detalhes do mesmo tamanho das letras dificulta a leitura mesmo quando a taxa passa, porque o olho não consegue separar as formas das letras das formas de trás. Folhas, cascalho, multidões, listras finas e padrões pequenos são os piores. Formas grandes e suaves são as melhores: um céu, uma parede desfocada, um gradiente liso.

A textura é boa quando o grão é muito menor do que as letras, como o grão de filme ou a rugosidade do papel. Vira problema quando os detalhes da textura chegam ao tamanho dos traços da sua fonte. Se você adora um padrão, amplie até que as formas dele sejam claramente maiores do que as letras ou mantenha-o longe das palavras. Texto sobre fundos carregados trata de padrões com mais detalhe, e texto legível sobre fotos trata de imagens.

Faixa de tons: manchas claras e escuras sob uma linha

A terceira propriedade é a que pega as pessoas de surpresa. Se uma única linha de texto cruza uma mancha clara e uma escura, nenhuma cor de texto funciona: o branco some na parte clara e o preto na escura. Um bom fundo para texto mantém uma faixa estreita de tons sob cada linha, toda clara ou toda escura.

Como testar qualquer fundo para texto

1. 1

   Aperte os olhos

   Feche meio os olhos. O detalhe some e só o tom permanece. Se as palavras se dissolvem no fundo, o contraste está baixo demais.

2. 2

   Desfoque

   Aplique um desfoque forte numa cópia só do fundo. O que sobrar sob a área do texto é o tom em que as letras realmente estão.

3. 3

   Veja em tons de cinza

   A cor pode enganar e fazer você achar que o contraste está bom. Os tons de cinza mostram só a luminosidade, que é do que a legibilidade depende.

4. 4

   Confira os extremos

   Meça o contraste nos pontos mais claro e mais escuro atrás das palavras, não na média.

5. 5

   Olhe no celular

   À distância de um braço, à luz do dia, no tamanho em que as pessoas realmente vão ver.

Como corrigir um fundo que briga com o texto

A maioria das correções acrescenta algo: uma caixa, uma sombra, uma faixa escura. Funcionam, mas cada uma é um remendo que deixa o design com cara de resgatado. Tente as correções nesta ordem, da menos visível à mais visível.

Na web, uma sobreposição suave em gradiente num lado de uma imagem de hero é uma versão respeitável da quinta correção: ela escurece só a área sob as palavras e deixa o resto da imagem em paz.

.hero {
  min-height: 70vh;
  color: #ffffff;
  background-image:
    linear-gradient(90deg, rgb(15 12 30 / 0.85) 0%, rgb(15 12 30 / 0.45) 45%, rgb(15 12 30 / 0) 70%),
    url("/images/hero.jpg");
  background-size: cover;
  background-position: center;
}

O Gradiently embute no próprio fundo as correções menos visíveis. Um Mark sabe onde estão as suas palavras: a região mais calma e de melhor contraste vai para trás do texto, as cores perto das letras escurecem ou clareiam, o detalhe carregado se acalma e a Tinta automática escolhe texto claro ou escuro em cada linha a partir da paleta do Mark. Sem caixas, sombras nem desfoque, e você escolhe a intensidade da resposta. Como funciona a tinta automática explica os detalhes, e texto sobre gradiente traz o método manual para qualquer gradiente.