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

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

Alguns fundos sustentam as palavras sem esforço e outros lutam contra cada letra. A diferença resume-se a três propriedades que podes verificar num minuto.

## The short version

- Um bom fundo para texto tem três propriedades onde as palavras assentam: contraste suficiente, pouco pormenor fino e uma gama de tons estreita.
- As WCAG pedem uma razão de contraste de pelo menos 4,5:1 para texto normal e 3:1 para texto grande.
- Um pormenor com cerca do tamanho das letras, como folhagem, multidões ou padrões confusos, prejudica mais a leitura do que a cor.
- Semicerrar os olhos perante um design, desfocá-lo ou vê-lo em escala de cinzentos mostra depressa se a zona do texto é calma o suficiente.
- Mover as palavras para uma parte mais calma do fundo costuma ser melhor do que acrescentar uma caixa ou uma sombra atrás delas.

Um bom **fundo para texto** tem três coisas na zona atrás das palavras: contraste forte com as letras, muito pouco pormenor fino e uma gama de tons uniforme em vez de manchas claras e escuras. A cor importa muito menos do que as pessoas pensam. Um gradiente violeta pode sustentar texto lindamente e uma fotografia cinzenta pode estragá-lo, consoante essas três propriedades. Este guia mostra como avaliar qualquer fundo, fotografia, gradiente ou textura, e o que fazer quando um falha.

## Contraste: a primeira propriedade

O contraste é a diferença de luminosidade entre as letras e o que está mesmo atrás delas. As Diretrizes de Acessibilidade para o Conteúdo Web definem a fasquia mensurável: uma razão 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-a para quaisquer duas cores.

| Texto | Fundo | Razão de contraste | Veredicto |
| --- | --- | --- | --- |
| Branco `#ffffff` | Índigo profundo `#1e1b4b` | 16:1 | Excelente a 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 |

Razões reais para combinações comuns. Rosas, laranjas, amarelos e verde-água claros e vivos precisam de texto escuro, por mais que o texto branco pareça certo sobre eles.

Numa cor lisa, uma verificação basta. Num gradiente ou numa fotografia, o fundo muda sob cada palavra, por isso verifica o ponto mais claro atrás de texto claro e o mais escuro atrás de texto escuro. É aí que o texto falha primeiro. [Contraste de cor e acessibilidade](https://gradiently.design/pt-pt/guide/color-contrast-accessibility) aprofunda as normas.

## Pormenor: porque é que os fundos confusos são difíceis de ler

O contraste é necessário mas não chega. Um fundo cheio de pormenor do tamanho das letras dificulta a leitura mesmo quando a razão passa, porque o olho não consegue separar as formas das letras das formas que estão atrás. Folhas, gravilha, multidões, riscas 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: sustenta bem o texto: `linear-gradient(160deg, #1e1b4b 0%, #4c1d95 100%)`
- Uma luz suave: texto em baixo: `radial-gradient(circle at 80% 20%, #7c3aed 0%, #1e1b4b 60%)`
- Riscas finas: lutam contra 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 maneiras. O par de cima sustenta as palavras com facilidade; o de baixo tem pormenor à escala das letras e faz de qualquer texto uma luta.

A textura não faz mal quando o seu grão é muito mais pequeno do que as letras, como o grão de película ou o dente do papel. Torna-se um problema quando as formas da textura se aproximam do tamanho dos traços do teu texto. Se gostas de um padrão, aumenta-o até as suas formas serem claramente maiores do que as letras, ou mantém-no longe das palavras. [Texto sobre fundos confusos](https://gradiently.design/pt-pt/guide/type-on-busy-backgrounds) trata dos padrões com mais pormenor, e [texto legível sobre fotografias](https://gradiently.design/pt-pt/guide/readable-text-on-photos) trata das imagens.

## Gama de tons: manchas claras e escuras sob a mesma linha

A terceira propriedade é a que apanha as pessoas desprevenidas. Se uma só linha de texto atravessar uma mancha clara e uma escura, nenhuma cor de texto única funciona: o branco desaparece na parte clara e o preto na escura. Um bom fundo para texto mantém uma gama de tons estreita sob cada linha, toda clara ou toda escura.

Uma publicação vertical em que o título atravessa zonas claras e escuras de um gradiente e parte dele é difícil de ler

O título atravessa partes claras e escuras do fundo, por isso algumas letras desaparecem, seja qual for a cor da tinta.

A mesma publicação com uma zona 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. **Semicerra os olhos** Fecha meio os olhos. O pormenor esbate-se e só resta o tom. Se as palavras se dissolvem no fundo, o contraste é demasiado baixo.
2. **Desfoca** Aplica um desfoque forte a uma cópia só do fundo. O que sobrar sob a zona do texto é o tom em que as letras realmente assentam.
3. **Vê em escala de cinzentos** A cor pode enganar-te e fazer-te pensar que o contraste está bem. A escala de cinzentos mostra só a luminosidade, que é de que a legibilidade depende.
4. **Verifica os extremos** Mede o contraste nos pontos mais claro e mais escuro atrás das palavras, não na média.
5. **Olha para ele num telemóvel** À distância do braço, à luz do dia, ao tamanho em que as pessoas o vão realmente ver.

## Corrigir um fundo que luta contra o texto

A maioria das correções acrescenta algo: uma caixa, uma sombra, uma faixa escura. Funcionam, mas cada uma é um remendo que faz o design parecer salvo à pressa. Experimenta as correções por esta ordem, da menos visível à mais visível.

### Tenta primeiro

- Move as palavras para a parte mais calma do fundo
- Corta ou reposiciona o fundo para que uma zona calma fique atrás delas
- Troca a tinta: texto escuro em zonas claras, claro em zonas escuras
- Torna o texto maior e mais pesado
- Escurece ou aclara o fundo só à volta das palavras

### Usa com moderação

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

Na web, uma sobreposição suave de gradiente num dos lados de uma imagem de hero é uma versão respeitável da quinta correção: escurece só a zona 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 está o título, e esbate-se até nada aos 70 por cento. Verifica o contraste no ponto mais claro atrás do texto.

O Gradiently incorpora no próprio fundo as correções menos visíveis. Um Mark sabe onde estão as tuas palavras: a sua região mais calma e de melhor contraste desloca-se para trás do texto, as cores junto às letras escurecem ou clareiam, o pormenor confuso relaxa, e a tinta automática escolhe texto claro ou escuro para cada linha a partir da paleta do Mark. Não há caixas, sombras nem desfoque, e tu escolhes com que força responde. [Como funciona a tinta automática](https://gradiently.design/pt-pt/guide/auto-ink-legibility) explica os pormenores, e [texto sobre um gradiente](https://gradiently.design/pt-pt/guide/text-on-gradient) dá 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. Os fundos muito claros ou muito escuros são os mais fáceis; os tons médios vivos como rosa, laranja e amarelo precisam de texto escuro.

### Que razão de contraste precisa o texto?

As WCAG pedem pelo menos 4,5:1 para texto normal e 3:1 para texto grande.

### Porque é que o meu texto é difícil de ler apesar de o contraste passar?

O fundo provavelmente tem pormenor próximo do tamanho das letras, ou manchas claras e escuras sob a mesma linha. Move as palavras para uma zona mais calma e uniforme.

### Como torno o texto legível num fundo confuso?

Primeiro move as palavras para a zona mais calma ou reenquadra a imagem. Se não for possível, escurece ou aclara só a zona atrás do texto e usa caixas ou sombras como último recurso.

### O texto branco ou preto lê-se melhor sobre cor?

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