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

[Canonical HTML page](https://gradiently.design/pt-br/guide/gradient-background-for-text)

Alguns fundos carregam palavras sem esforço e outros brigam com cada letra. A diferença se resume a três propriedades que você confere em um minuto.

## The short version

- Um bom fundo para texto tem três propriedades onde as palavras ficam: contraste suficiente, pouco detalhe fino e uma faixa estreita de tons.
- A WCAG pede uma taxa de contraste de pelo menos 4,5:1 para texto normal e 3:1 para texto grande.
- Detalhes do mesmo tamanho das letras, como folhagem, multidões ou padrões carregados, prejudicam a leitura mais do que a cor.
- Apertar os olhos diante de um design, desfocá-lo ou vê-lo em tons de cinza mostra rapidamente se a área do texto é calma o bastante.
- Mover as palavras para uma parte mais calma do fundo costuma ser melhor do que acrescentar uma caixa ou sombra atrás delas.

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](https://webaim.org/resources/contrastchecker/) calcula para quaisquer duas cores.

| Texto | Fundo | Taxa de contraste | Veredito |
| --- | --- | --- | --- |
| Branco `#ffffff` | Índigo profundo `#1e1b4b` | 16:1 | Excelente em qualquer tamanho |
| Branco `#ffffff` | Violeta `#7c3aed` | 5,7:1 | Passa para texto corrido |
| Branco `#ffffff` | Ardósia `#64748b` | 4,8:1 | Passa por pouco |
| Branco `#ffffff` | Rosa `#f472b6` | 2,6:1 | Falha, mesmo para texto grande |
| Quase preto `#1a1a1a` | Rosa `#f472b6` | 6,6:1 | Passa: o mesmo rosa, tinta mais escura |
| Branco `#ffffff` | Laranja `#fb923c` | 2,3:1 | Falha |

Taxas reais para combinações comuns. Rosas, laranjas, amarelos e verdes-azulados claros e vivos pedem texto escuro, por mais que o texto branco pareça certo neles.

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](https://gradiently.design/pt-br/guide/color-contrast-accessibility) 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.

- Liso: carrega bem o texto: `linear-gradient(160deg, #1e1b4b 0%, #4c1d95 100%)`
- Luz suave: palavras embaixo à esquerda: `radial-gradient(circle at 80% 20%, #7c3aed 0%, #1e1b4b 60%)`
- Listras finas: brigam com cada letra: `repeating-linear-gradient(45deg, #1e1b4b 0px, #1e1b4b 6px, #7c3aed 6px, #7c3aed 12px)`
- Anéis pequenos: ilegível: `repeating-radial-gradient(circle at 50% 50%, #4c1d95 0px, #4c1d95 4px, #c4b5fd 4px, #c4b5fd 9px)`

As mesmas duas cores de quatro jeitos. O par de cima carrega palavras com facilidade; o par de baixo tem detalhe na escala das letras e faz qualquer texto virar um sofrimento.

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](https://gradiently.design/pt-br/guide/type-on-busy-backgrounds) trata de padrões com mais detalhe, e [texto legível sobre fotos](https://gradiently.design/pt-br/guide/readable-text-on-photos) 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.

Um post vertical em que o título atravessa áreas claras e escuras de um gradiente e partes dele são difíceis de ler

O título cruza partes claras e escuras do fundo, então algumas letras somem seja qual for a cor da tinta.

O mesmo post com uma área calma e de tom uniforme do gradiente atrás do título, para que todas as letras se leiam

O mesmo fundo com uma região uniforme e mais profunda atrás das palavras. Agora uma só cor de tinta funciona para todas as letras.

## Como testar qualquer fundo para texto

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. **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. **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. **Confira os extremos** Meça o contraste nos pontos mais claro e mais escuro atrás das palavras, não na média.
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.

### Tente primeiro

- Mover as palavras para a parte mais calma do fundo
- Recortar ou reposicionar o fundo para que uma área calma fique atrás delas
- Trocar a tinta: texto escuro em regiões claras e claro em escuras
- Deixar a fonte maior e mais pesada
- Escurecer ou clarear o fundo só em volta das palavras

### Use com moderação

- Caixas ou faixas sólidas atrás do texto
- Sombras projetadas nas letras
- Contornos em volta das letras
- Desfoque forte sobre a imagem toda
- Uma sobreposição escura sobre o fundo inteiro

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.

```css
.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;
}
```

Escurece o lado esquerdo, onde fica o título, e some por completo aos 70 por cento. Confira o contraste no ponto mais claro atrás do texto.

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](https://gradiently.design/pt-br/guide/auto-ink-legibility) explica os detalhes, e [texto sobre gradiente](https://gradiently.design/pt-br/guide/text-on-gradient) traz o método manual para qualquer gradiente.

## FAQ

### Qual é a melhor cor de fundo para texto?

Qualquer cor que contraste fortemente com o texto, pelo menos 4,5:1 para texto normal. Fundos muito claros ou muito escuros são os mais fáceis; tons médios vivos, como rosa, laranja e amarelo, pedem texto escuro.

### Qual taxa de contraste o texto precisa ter?

A WCAG pede pelo menos 4,5:1 para texto normal e 3:1 para texto grande.

### Por que meu texto é difícil de ler mesmo com o contraste passando?

O fundo provavelmente tem detalhes do tamanho das letras ou manchas claras e escuras sob a mesma linha. Mova as palavras para uma área mais calma e uniforme.

### Como deixo o texto legível sobre um fundo carregado?

Primeiro mova as palavras para a área mais calma ou reenquadre a imagem. Se não for possível, escureça ou clareie só a área atrás do texto e use caixas ou sombras como último recurso.

### Texto branco ou preto é mais fácil de ler sobre cor?

Depende da luminosidade da cor. Cores escuras pedem texto branco; cores claras e vivas costumam ler melhor com quase preto.