# Como colocar texto sobre fundos carregados sem usar uma caixa

[Canonical HTML page](https://gradiently.design/pt-br/guide/type-on-busy-backgrounds)

As soluções de sempre são um painel escuro, uma sombra ou um desfoque. Todas funcionam, e todas chamam atenção para si. Existe um jeito mais discreto de fazer as palavras serem lidas.

## The short version

- Texto sobre um fundo carregado é difícil de ler porque o contraste muda de letra para letra e as bordas do fundo competem com as formas das letras.
- Caixas, scrims, sombras e desfoques deixam o texto legível, mas cada um cobre parte do fundo e muda a sensação do design.
- Colocar as palavras sobre a região mais calma e uniforme do fundo é a solução que menos custa ao design.
- Escolher texto claro ou escuro para cada linha, com base no que realmente está atrás dela, mantém todas as linhas legíveis em um fundo que vai do claro ao escuro.
- Um fundo que se reorganiza em volta das palavras, acalmando e aprofundando atrás delas, pode deixar o texto legível sem nenhum remendo visível.

Deixar legível um **texto sobre fundo carregado** depende de duas coisas: o que está logo atrás das letras e qual é a cor delas. As soluções comuns, uma caixa, uma sombra ou um desfoque, mudam o que está atrás das letras cobrindo o fundo. As melhores colocam as palavras onde o fundo já é calmo, escolhem a cor de cada linha e, quando a ferramenta permite, deixam o fundo abrir espaço em vez de receber um remendo.

Um título colocado direto sobre uma textura de gradiente detalhada, com as letras competindo com o fundo

Sem ajuda: a textura passa direto pelas palavras.

O mesmo título e a mesma textura, com a parte mais calma do fundo movida para trás das palavras

Abrindo espaço: a parte calma da textura fica atrás delas.

## Por que fundos carregados e texto brigam

A leitura depende do contraste entre cada letra e o que está em volta dela. Em uma cor chapada, esse contraste é igual em todo lugar. Em uma foto, uma estampa ou um gradiente animado, ele muda o tempo todo: uma letra fica sobre um ponto de luz, a seguinte sobre uma sombra, e a palavra se desfaz em pedaços. O detalhe piora tudo, porque as bordas e formas do próprio fundo lembram um pouco os traços das letras, e o olho precisa separar uma coisa da outra.

É por isso que as diretrizes de contraste, como as taxas de [contraste de cores](https://gradiently.design/pt-br/guide/color-contrast-accessibility), são difíceis de aplicar em fundos carregados: não existe uma única cor de fundo para medir. O teste honesto é o pior ponto, a área mais clara atrás de texto claro ou a mais escura atrás de texto escuro.

## As soluções de sempre e o que cada uma custa

Toda solução padrão funciona mudando o que está logo atrás das letras. Todas são legítimas, e todas tiram algo do fundo que você escolheu.

| Solução | Como funciona | O que custa |
| --- | --- | --- |
| Caixa sólida | Um painel de cor chapada atrás do texto | Cobre o fundo; parece uma etiqueta |
| Painel translúcido | Uma caixa transparente que escurece ou clareia | Suja as cores embaixo dela; a borda aparece |
| Scrim | Um gradiente suave que escurece atrás do texto | Escurece um lado inteiro da imagem |
| Sombra projetada | Um halo escuro em volta de cada letra | Parece datada quando pesada; suja a cor |
| Área desfocada | Desfoca o fundo atrás das palavras | Parece inacabado; denuncia onde vai o texto |
| Contorno | Uma linha contrastante em volta de cada letra | Muda o caráter da fonte |

Seis soluções comuns. Todas funcionam; todas aparecem.

Se usar uma delas, use com delicadeza. Um scrim que esmaece em uma área grande chama menos atenção que uma caixa, e uma sombra suave e larga parece menos datada que uma dura. Esta é uma versão contida para a web:

```css
.hero {
  position: relative;
}

/* A soft scrim: dark at the bottom, where the text sits, gone by the middle. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / 0.55) 0%, rgb(0 0 0 / 0.2) 35%, rgb(0 0 0 / 0) 60%);
  pointer-events: none;
}

.hero h1 {
  position: relative;
  z-index: 1;
  color: #fff;
  /* A wide, faint shadow reads as depth, not as an outline. */
  text-shadow: 0 1px 24px rgb(0 0 0 / 0.35);
}
```

Um scrim e uma sombra discretos. Confira o resultado em um verificador de contraste, como o [da WebAIM](https://webaim.org/resources/contrastchecker/), no ponto mais claro atrás do texto.

## Melhor: coloque as palavras onde o fundo é calmo

A maioria dos fundos carregados tem uma região mais tranquila: um trecho de céu, uma mancha suave de cor, uma área fora de foco. Mover o texto para lá, ou recortar para que essa região caia onde vai o texto, resolve o problema sem cobrir nada. Ao escolher ou criar um fundo, procure um com uma área calma onde as suas palavras costumam ficar.

- Carregado: o texto vai brigar com isto: `repeating-linear-gradient(45deg, #1d3557 0px, #1d3557 12px, #e63946 12px, #e63946 24px, #f1faee 24px, #f1faee 36px)`
- Uma mancha calma no meio: `radial-gradient(ellipse at 50% 50%, #f1faee 0%, #a8dadc 35%, #457b9d 70%, #1d3557 100%)`

As mesmas três cores, dois fundos muito diferentes para palavras. As listras dão a cada letra um fundo diferente; um campo radial dá ao centro uma mancha clara e uniforme onde o texto escuro se lê com nitidez.

A mesma ideia vale para fotos, onde recorte, desfoque e duotone podem criar calma; [texto sobre imagem](https://gradiently.design/pt-br/guide/text-over-image) passa por sete técnicas. Em gradientes, a zona calma costuma ficar onde a cor muda mais devagar; [texto sobre gradiente](https://gradiently.design/pt-br/guide/text-on-gradient) mostra como encontrá-la.

## Escolha a cor do texto para cada linha

Um fundo que vai do claro ao escuro não é bem atendido por uma só cor de texto. O texto branco se lê na metade escura e some na metade clara. Em vez de forçar um painel atrás dele, escolha a cor por linha: texto claro onde o fundo atrás daquela linha é escuro, texto escuro onde é claro. Tire as duas cores da própria paleta do fundo, um tom profundo e um claro, para que pareçam parte do design e não coladas por cima.

### Uma cor para tudo

- Título branco atravessando um campo claro e escuro
- Metade das letras perde contraste
- Uma caixa acrescentada para salvar
- O fundo desaparece embaixo da caixa

### Cor escolhida por linha

- Cada linha conferida contra o que está atrás dela
- Texto claro sobre áreas escuras, escuro sobre claras
- As duas cores tiradas da paleta do fundo
- Nenhum remendo necessário

## Deixe o fundo se mover, não as palavras

A solução mais discreta de todas é um fundo que sabe onde estão as palavras. É assim que um Mark do Gradiently se comporta: em vez de ser coberto, ele se reorganiza. O material inteiro desliza para que a região mais calma e de melhor contraste fique atrás do texto; perto das letras, as cores escurecem sob texto claro e clareiam sob texto escuro; as cristas carregadas se acalmam. Nada disso é uma forma que dê para apontar. Parece o próprio design, porque é o próprio design.

A outra metade é a cor do texto. Ative a **Tinta automática** e cada linha escolhe a cor clara ou escura que melhor se lê contra o que realmente está atrás dela, a partir de um par tirado da paleta do próprio Mark. Mova um título de uma área clara para uma escura e ele troca sozinho, sem alarde. Você decide o quanto o fundo reage: quase nada, equilibrado ou um palco claro para um título que precisa causar impacto.

> A melhor solução de legibilidade é aquela que ninguém percebe.

## Checklist para texto sobre fundos carregados

1. **Encontre primeiro a área calma** Posicione ou recorte para que as palavras fiquem sobre a parte mais uniforme do fundo.
2. **Confira o pior ponto** Teste o contraste no ponto mais claro atrás de texto claro ou no mais escuro atrás de texto escuro, não na média.
3. **Escolha a cor por linha** Claro sobre escuro, escuro sobre claro, as duas cores tiradas da paleta do fundo.
4. **Use peso e tamanho** Letras mais pesadas e maiores aguentam fundos mais carregados. Pesos finíssimos não aguentam. [Fontes para redes sociais](https://gradiently.design/pt-br/guide/fonts-for-social-media) traz fontes que resistem.
5. **Remende só em último caso** Se precisar, use a solução mais delicada: um scrim suave em vez de uma caixa, uma sombra larga e fraca em vez de uma dura.

## FAQ

### Como deixar texto legível sobre um fundo carregado?

Coloque as palavras sobre a parte mais calma do fundo, escolha texto claro ou escuro para cada linha com base no que está atrás dela e use um peso maior e mais pesado. Use um scrim suave só se isso não bastar.

### Sombra projetada é um bom jeito de deixar o texto legível?

Uma sombra suave, larga e fraca pode ajudar. Uma sombra dura e pesada deixa o texto com cara de datado e suja a cor, então use com moderação.

### Como confiro o contraste em um fundo carregado?

Meça no pior ponto, como a área mais clara atrás de texto claro, em vez da cor média. Um verificador de contraste dá a taxa para esse par.

### O que é a Tinta automática no Gradiently?

A Tinta automática escolhe texto claro ou escuro para cada linha a partir da paleta do próprio Mark, com base no que realmente está atrás daquela linha, e troca se o texto se mover.