# Texto sobre fundos carregados, sem recorrer a uma caixa

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

As soluções habituais são um painel escuro, uma sombra projetada ou um desfoque. Todas funcionam, e todas se fazem notar. Há uma forma mais discreta de pôr as palavras a ler-se.

## The short version

- O texto sobre um fundo carregado é difícil de ler porque o contraste muda de letra para letra e as arestas do fundo competem com as formas das letras.
- Caixas, sombreados, sombras e desfoques tornam o texto legível, mas cada um tapa parte do fundo e muda a sensação do design.
- Pôr as palavras sobre a zona mais calma e uniforme de um fundo é a solução que menos custa ao design.
- Escolher tinta clara ou escura para cada linha, com base no que está realmente por trás, mantém todas as linhas legíveis num fundo que vai do claro ao escuro.
- Um fundo que se reorganiza à volta das palavras, acalmando e aprofundando por trás delas, pode tornar o texto legível sem nenhuma mancha visível.

Tornar legível o **texto sobre um fundo carregado** resume-se a duas coisas: o que está mesmo por trás das letras e a cor das letras. As soluções comuns, uma caixa, uma sombra ou um desfoque, mudam o que está por trás das letras tapando-o. As melhores soluções põem as palavras onde o fundo já é calmo, escolhem a tinta para cada linha e, quando a ferramenta o permite, deixam o fundo abrir espaço em vez de ser remendado.

Um título composto diretamente sobre uma textura de gradiente detalhada, com as letras a competir com o fundo

Entregue a si próprio: a textura passa diretamente pelas palavras.

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

A abrir espaço: a parte calma da textura fica por trás delas.

## Porque é que os fundos carregados e o texto lutam

Ler depende do contraste entre cada letra e o que a rodeia. Sobre uma cor lisa, esse contraste é igual em todo o lado. Sobre uma fotografia, um padrão ou um gradiente animado, muda constantemente: uma letra assenta num realce, a seguinte numa sombra, e a palavra parte-se em pedaços. O detalhe piora tudo, porque as arestas e formas do próprio fundo parecem-se um pouco com traços de letras, e o olhar tem de separar as duas coisas.

É por isso que as orientações de contraste, como os rácios em [contraste de cor](https://gradiently.design/pt-pt/guide/color-contrast-accessibility), são difíceis de aplicar em fundos carregados: não há uma única cor de fundo para medir. O teste honesto é o pior ponto, a zona mais clara por trás de texto claro ou a mais escura por trás de texto escuro.

## As soluções habituais, e o que cada uma custa

Todas as soluções clássicas funcionam mudando o que está mesmo por trás das letras. Todas são legítimas, e todas tiram alguma coisa ao fundo que escolheste.

| Solução | Como funciona | O que custa |
| --- | --- | --- |
| Caixa sólida | Um painel de cor lisa por trás do texto | Tapa o fundo; parece uma etiqueta |
| Painel translúcido | Uma caixa transparente que escurece ou clareia | Turva as cores por baixo; a aresta nota-se |
| Sombreado | Um gradiente suave que escurece por trás do texto | Escurece um lado inteiro da imagem |
| Sombra projetada | Um halo escuro à volta de cada letra | Parece datada quando pesada; turva a cor |
| Zona desfocada | Desfoca o fundo por trás das palavras | Parece inacabado; anuncia onde vai o texto |
| Contorno | Uma linha em contraste à volta de cada letra | Muda o carácter do tipo de letra |

Seis soluções comuns. Todas funcionam; todas se veem.

Se usares uma, usa-a com suavidade. Um sombreado que desvanece ao longo de uma área grande nota-se menos do que uma caixa, e uma sombra suave e larga parece menos datada do que uma dura. Eis 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 sombreado e uma sombra suaves. Verifica o resultado com um verificador de contraste como o [da WebAIM](https://webaim.org/resources/contrastchecker/) no ponto mais claro por trás do texto.

## Melhor: põe as palavras onde o fundo é calmo

A maioria dos fundos carregados tem uma zona mais tranquila: um pedaço de céu, uma mancha suave de cor, uma área desfocada. Mover o texto para ali, ou recortar para que essa zona caia onde vai o texto, resolve o problema sem tapar nada. Quando escolheres ou criares um fundo, procura um com uma zona calma onde as tuas palavras costumam ficar.

- Carregado: o texto vai lutar 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 terrenos muito diferentes para as palavras. As riscas 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 aplica-se às fotografias, onde o recorte, o desfoque e o duotone podem todos criar calma; [texto sobre imagem](https://gradiently.design/pt-pt/guide/text-over-image) percorre sete técnicas. Nos gradientes, a zona calma costuma ser onde a cor muda mais devagar; [texto sobre gradiente](https://gradiently.design/pt-pt/guide/text-on-gradient) mostra como encontrá-la.

## Escolhe a tinta para cada linha

Um fundo que vai do claro ao escuro não pode ser servido por uma só cor de tinta. O texto branco lê-se na metade escura e desaparece na metade clara. Em vez de forçares um painel por trás, escolhe a tinta linha a linha: tinta clara onde o fundo por trás dessa linha é escuro, tinta escura onde é claro. Tira as duas tintas da própria paleta do fundo, um tom profundo e um pálido, para parecerem parte do design e não coladas por cima.

### Uma tinta para tudo

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

### Tinta escolhida por linha

- Cada linha verificada contra o que tem por trás
- Tinta clara sobre zonas escuras, escura sobre claras
- As duas tintas tiradas da paleta do fundo
- Nenhum remendo necessário

## Deixa o fundo mexer-se, não as palavras

A solução mais discreta de todas é um fundo que sabe onde estão as palavras. É assim que um Mark da Gradiently se comporta: em vez de ser tapado, reorganiza-se. Todo o material desliza para que a sua zona mais calma e com melhor contraste fique por trás do texto; perto das letras, as cores aprofundam-se por baixo do texto claro e clareiam por baixo do texto escuro; os relevos carregados acalmam. Nada disto é uma forma que se possa apontar. Lê-se como o design, porque é o design.

A outra metade é a tinta. Define o texto como **tinta automática** e cada linha escolhe a tinta clara ou escura que melhor se lê contra o que está realmente por trás, a partir de um par tirado da própria paleta do Mark. Move um título de uma zona clara para uma escura e ele troca discretamente. Tu decides com que força o fundo responde: quase impercetível, equilibrado, ou um palco claro para um título que tem de acertar.

> A melhor solução de legibilidade é a que ninguém nota.

## Uma lista de verificação para texto sobre fundos carregados

1. **Encontra primeiro a zona calma** Posiciona ou recorta para que as palavras fiquem sobre a parte mais uniforme do fundo.
2. **Verifica o pior ponto** Testa o contraste no ponto mais claro por trás de texto claro ou no mais escuro por trás de texto escuro, não na média.
3. **Escolhe a tinta por linha** Clara sobre escuro, escura sobre claro, ambas tiradas da paleta do fundo.
4. **Usa o peso e o tamanho** Texto mais pesado e maior aguenta fundos mais carregados. Os pesos finíssimos não. [Tipos de letra para redes sociais](https://gradiently.design/pt-pt/guide/fonts-for-social-media) tem tipos que resistem.
5. **Remenda só em último recurso** Se tiver de ser, usa a solução mais suave: um sombreado leve em vez de uma caixa, uma sombra larga e ténue em vez de uma dura.

## FAQ

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

Põe as palavras sobre a parte mais calma do fundo, escolhe tinta clara ou escura para cada linha com base no que está por trás e usa um peso mais forte e um tamanho maior. Usa um sombreado suave só se isso não chegar.

### Uma sombra projetada é uma boa forma de tornar o texto legível?

Uma sombra suave, larga e ténue pode ajudar. Uma sombra dura e pesada faz o texto parecer datado e turva a cor, por isso usa-a com moderação.

### Como verifico o contraste num fundo carregado?

Mede no pior ponto, como a zona mais clara por trás de texto claro, em vez da cor média. Um verificador de contraste dá-te o rácio para esse par.

### O que é a tinta automática na Gradiently?

A tinta automática escolhe texto claro ou escuro para cada linha a partir da própria paleta do Mark, com base no que está realmente por trás dessa linha, e troca se o texto se mover.