# Texto sobre fundo gradiente: como garantir a leitura sempre

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

Um gradiente muda embaixo de cada letra, então uma cor que se lê em uma ponta pode sumir na outra. Veja o método que mantém as palavras legíveis ao longo de toda a transição.

## The short version

- Acertar texto sobre um gradiente é difícil porque a luminosidade do fundo muda embaixo das palavras, então uma mesma cor de texto pode ter contraste forte em uma ponta e fraco na outra.
- O melhor lugar para texto em um gradiente é a zona calma, o trecho em que a cor muda mais devagar.
- Escolha a cor do texto pela luminosidade da cor atrás dele, não pelo matiz: branco ou quase branco sobre paradas escuras, quase preto sobre as claras.
- Cores de luminosidade média em um gradiente são uma armadilha, porque nem o texto branco nem o preto têm muito contraste de sobra contra elas.
- Confira o contraste no pior ponto atrás do texto e veja o design no tamanho de celular e em tons de cinza antes de publicar.

Para colocar **texto sobre fundo gradiente** e garantir que ele sempre seja lido, posicione as palavras no trecho mais calmo do gradiente, escolha texto claro ou escuro pela luminosidade da cor logo atrás delas, mantenha o texto pequeno longe dos meios-tons e teste o contraste no pior ponto, não na média. Tamanho e peso fazem o resto: letras grandes e robustas aguentam um fundo que muda, coisa que letras finas e pequenas não aguentam.

## Por que texto sobre gradiente é mais difícil do que parece

Em uma cor chapada, o contraste entre texto e fundo é um número só. Em um gradiente, ele muda ao longo da transição. Um texto branco pode ficar nítido contra a ponta escura e quase invisível contra a ponta clara, às vezes dentro de uma única palavra. O gradiente abaixo mostra como isso acontece rápido.

Do índigo noturno ao rosa-claro: `linear-gradient(90deg, #1e1b4b 0%, #7c3aed 35%, #c026d3 55%, #ec4899 75%, #fbcfe8 100%)`

Um gradiente, cinco fundos muito diferentes para o texto. O branco se lê à esquerda, o quase preto à direita, e o meio magenta não favorece muito nenhum dos dois.

| Cor atrás do texto | Branco (#ffffff) | Quase preto (#0b0b14) | Use |
| --- | --- | --- | --- |
| Índigo noturno `#1e1b4b` | 16,0:1 | 1,2:1 | Branco |
| Violeta `#7c3aed` | 5,7:1 | 3,4:1 | Branco |
| Magenta `#c026d3` | 4,7:1 | 4,2:1 | Nenhum tem muita folga |
| Rosa `#ec4899` | 3,5:1 | 5,5:1 | Quase preto |
| Rosa-claro `#fbcfe8` | 1,4:1 | 14,2:1 | Quase preto |

Taxas de contraste para cada parada do gradiente acima, calculadas com a fórmula da WCAG. Texto corrido precisa de pelo menos 4,5:1; texto grande precisa de 3:1.

Os limites vêm das [orientações de contraste da WCAG](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html): **4,5:1** para texto normal e **3:1** para texto grande, cerca de 24 pixels ou mais, ou uns 19 pixels em negrito. [Contraste de cores](https://gradiently.design/pt-br/guide/color-contrast-accessibility) explica as regras em linguagem simples.

## Passo 1: encontre a zona calma

Todo gradiente tem trechos em que a cor muda devagar e trechos em que muda rápido. O texto fica na parte lenta, porque o contraste embaixo dele se mantém quase constante. Em um gradiente linear, costuma ser uma das pontas; em um radial, o centro ou a borda externa; em um mesh ou aurora, a mancha de cor maior e mais uniforme.

- Calmo à esquerda: o texto vai aqui: `linear-gradient(90deg, #0f172a 0%, #0f172a 40%, #6d28d9 75%, #f472b6 100%)`
- Calmo no centro: o texto vai aqui: `radial-gradient(ellipse at 50% 45%, #fdf2f8 0%, #fbcfe8 30%, #db2777 75%, #500724 100%)`

Dois gradientes feitos com uma zona calma de propósito. O primeiro mantém uma cor escura nos 40 por cento da esquerda; o segundo guarda uma mancha clara e larga no meio para texto escuro.

Se você controla o gradiente, crie a zona calma nele: segure uma cor por mais tempo repetindo uma parada, como faz o primeiro exemplo. Se o gradiente veio pronto, mova o texto em vez de brigar com ele.

## Passo 2: escolha a cor pela luminosidade, não pelo matiz

Contraste é questão de luminosidade. Um violeta vivo e um laranja vivo podem parecer igualmente fortes, mas o branco se lê bem no violeta e mal no laranja, porque o laranja é bem mais claro. Ao escolher a cor do texto, ignore o matiz e pergunte: a cor atrás desta linha é escura ou clara?

### Evite

- Escolher a cor do texto para combinar com o matiz, como texto rosa em gradiente rosa
- Um título branco esticado entre a ponta escura e a clara
- Julgar o contraste no olho em um monitor com brilho alto
- Texto colorido sobre um fundo saturado

### Faça

- Texto claro sobre paradas escuras, texto escuro sobre as claras
- Linhas posicionadas para que cada uma fique sobre uma só luminosidade
- Medir a taxa no pior ponto
- Um quase branco ou quase preto da mesma família do gradiente

Cores de texto tingidas parecem mais pensadas do que branco e preto puros. Use um tom bem claro da cor mais clara do gradiente e um tom bem escuro da mais escura; eles levam a paleta para a tipografia e costumam ter contraste suficiente. [Gradientes lamacentos](https://gradiently.design/pt-br/guide/muddy-gradients) explica por que as misturas do meio perdem contraste de luminosidade.

## Passo 3: fuja da armadilha dos meios-tons

Olhe a linha do magenta na tabela: 4,7:1 com branco e 4,2:1 com quase preto. Nenhuma das duas cores tem muita folga. Cores de luminosidade média ficam no meio da maioria dos gradientes, que é justamente onde as pessoas costumam centralizar o texto. Texto pequeno ali vai ficar no limite, qualquer que seja a cor escolhida.

- **Mova o texto** em direção à ponta mais escura ou mais clara.
- **Desloque o gradiente** para que a parada atrás do texto fique mais escura ou mais clara.
- **Deixe o texto grande e em negrito**, para que valha o limite mais baixo de 3:1 para texto grande.
- **Reserve os meios-tons** para decoração, formas e respiro, não para palavras.

```css
.banner {
  /* The dark stop is held to 45%, so the headline on the left sits on one lightness. */
  background: linear-gradient(90deg, #1e1b4b 0%, #1e1b4b 45%, #7c3aed 70%, #ec4899 100%);
  color: #f5f3ff; /* a pale violet tint rather than pure white */
}

.banner h1 {
  max-width: 40%;
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.5rem);
}
```

Criando a zona calma em um gradiente CSS: o título fica limitado aos 40 por cento da esquerda, que ficam inteiros sobre a parada escura.

## Passo 4: use tamanho e peso

Letras mais pesadas e maiores têm mais área e são lidas como formas, então toleram melhor um fundo que muda. Pesos finíssimos e leves se desfazem quando a cor atrás deles varia. Em um gradiente, use texto corrido em peso regular, médio ou negrito em vez de pesos leves e mantenha os títulos generosos. [Fontes para redes sociais](https://gradiently.design/pt-br/guide/fonts-for-social-media) lista fontes robustas que se leem bem no celular.

Um post vertical com um título em negrito sobre a área mais calma de um fundo gradiente

Tipografia grande e robusta na parte mais calma do gradiente, com a cor escolhida pelo que fica atrás dela.

## Passo 5: teste no tamanho do celular e em tons de cinza

1. **Meça o pior ponto** Colete a cor mais clara atrás do texto claro, ou a mais escura atrás do texto escuro, e confira a taxa.
2. **Veja em tons de cinza** Tire a saturação de uma cópia do design. Sem o matiz, um contraste de luminosidade fraco fica evidente.
3. **Olhe no celular** Com o braço esticado, na luz do dia se puder. Texto pequeno sobre gradiente falha ali primeiro.
4. **Aperte os olhos** Feche os olhos pela metade. O texto ainda deve se destacar do fundo como forma.

Para fundos mais carregados que um gradiente, como fotos e texturas, veja [texto sobre fundos carregados](https://gradiently.design/pt-br/guide/type-on-busy-backgrounds). No Gradiently, os Marks movem a região mais calma deles para trás das palavras, e a **Tinta automática** escolhe texto claro ou escuro para cada linha a partir da paleta do próprio Mark, então o método acima acontece enquanto você digita.

## FAQ

### Que cor de texto funciona em fundo gradiente?

Depende da luminosidade atrás do texto: branco ou um tom claro sobre paradas escuras, quase preto ou um tom escuro sobre paradas claras. O matiz importa bem menos que a luminosidade.

### Como confiro o contraste em um gradiente?

Meça a taxa no pior ponto atrás do texto, não na média. Texto normal precisa de pelo menos 4,5:1 e texto grande de pelo menos 3:1.

### Onde colocar o texto em um gradiente?

Sobre a zona calma, onde a cor muda mais devagar, geralmente uma das pontas de um gradiente linear ou o centro de um radial.

### Por que o texto fica difícil de ler no meio do meu gradiente?

Cores de luminosidade média dão contraste fraco tanto com texto branco quanto com preto. Mova o texto para uma das pontas, desloque o gradiente ou deixe o texto grande e em negrito.