# Texto sobre fundo com gradiente: como garantir que se lê sempre

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

Um gradiente muda por baixo de cada letra, por isso uma cor que se lê numa ponta pode desaparecer na outra. Este é o método que mantém as palavras legíveis ao longo de toda a mistura.

## The short version

- O texto sobre um gradiente é difícil de acertar porque a luminosidade do fundo muda por baixo das palavras, por isso a mesma cor de tinta pode ter muito contraste numa ponta e pouco na outra.
- O melhor sítio para o texto num gradiente é a sua zona calma, o troço onde a cor muda mais devagar.
- Escolhe a tinta pela luminosidade da cor que está por trás e não pelo tom: branco ou quase branco sobre paragens escuras, quase preto sobre paragens claras.
- As cores de luminosidade média num gradiente são uma armadilha, porque nem o texto branco nem o preto têm grande margem de contraste sobre elas.
- Verifica o contraste no pior ponto por trás do texto e vê o design no tamanho de um telemóvel e em tons de cinzento antes de publicar.

Para pôr **texto sobre fundo com gradiente** de forma a que se leia sempre, coloca as palavras sobre o troço mais calmo do gradiente, escolhe tinta clara ou escura pela luminosidade da cor mesmo por trás delas, mantém o texto pequeno longe dos tons médios e testa o contraste no pior ponto, não na média. O tamanho e o peso fazem o resto: letras grandes e robustas aguentam um fundo em mudança que letras finas e pequenas não aguentam.

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

Sobre uma cor lisa, o contraste entre o texto e o fundo é um só número. Sobre um gradiente, muda ao longo da mistura. O texto branco pode ficar nítido contra a ponta escura e quase invisível contra a ponta clara, às vezes dentro da mesma palavra. O gradiente abaixo mostra a rapidez com que isso acontece.

Noite índigo a rosa pálido: `linear-gradient(90deg, #1e1b4b 0%, #7c3aed 35%, #c026d3 55%, #ec4899 75%, #fbcfe8 100%)`

Um gradiente, cinco fundos muito diferentes para o texto. O branco lê-se à esquerda, o quase preto à direita, e o magenta do meio não serve particularmente bem a nenhum.

| Cor por trás do texto | Branco (#ffffff) | Quase preto (#0b0b14) | Usar |
| --- | --- | --- | --- |
| Noite índigo `#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 grande margem |
| Rosa `#ec4899` | 3.5:1 | 5.5:1 | Quase preto |
| Rosa pálido `#fbcfe8` | 1.4:1 | 14.2:1 | Quase preto |

Rácios de contraste para cada paragem do gradiente acima, calculados com a fórmula WCAG. O texto corrido precisa de pelo menos 4.5:1; o 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, a partir de cerca de 24 píxeis, ou cerca de 19 píxeis em negrito. [Contraste de cor](https://gradiently.design/pt-pt/guide/color-contrast-accessibility) explica as regras em palavras simples.

## Passo 1: encontra a zona calma

Todos os gradientes têm troços onde a cor muda devagar e troços onde muda depressa. O texto pertence à parte lenta, porque o contraste por baixo dele se mantém quase constante. Num gradiente linear, costuma ser uma das pontas; num gradiente radial, é o centro ou a orla exterior; numa malha ou numa aurora, é a mancha de cor maior e mais uniforme.

- Esquerda calma: o texto vai aqui: `linear-gradient(90deg, #0f172a 0%, #0f172a 40%, #6d28d9 75%, #f472b6 100%)`
- Centro calmo: o texto vai aqui: `radial-gradient(ellipse at 50% 45%, #fdf2f8 0%, #fbcfe8 30%, #db2777 75%, #500724 100%)`

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

Se controlas o gradiente, constrói a zona calma lá dentro: mantém uma cor durante mais tempo repetindo uma paragem, como faz o primeiro exemplo. Se o gradiente te é dado, move o texto em vez de lutar contra ele.

## Passo 2: escolhe a tinta pela luminosidade, não pelo tom

O contraste tem a ver com luminosidade. Um violeta vivo e um laranja vivo podem parecer igualmente fortes, mas o branco lê-se bem sobre o violeta e mal sobre o laranja, porque o laranja é muito mais claro. Ao escolher a tinta, ignora o tom e pergunta: a cor por trás desta linha é escura ou clara?

### Evita

- Escolher a tinta a condizer com o tom, como texto rosa num gradiente rosa
- Um título branco esticado entre a ponta escura e a clara
- Avaliar o contraste a olho num monitor brilhante
- Tinta colorida sobre um fundo saturado

### Faz

- Tinta clara sobre paragens escuras, tinta escura sobre paragens claras
- Linhas colocadas de forma a que cada uma assente numa só luminosidade
- Medir o rácio no pior ponto
- Um quase branco ou quase preto tirado da própria família do gradiente

As tintas com um toque de cor parecem mais pensadas do que o branco e o preto puros. Tira um tom muito pálido da cor mais clara do gradiente e uma sombra muito profunda da mais escura; levam a paleta para o texto e costumam ter contraste suficiente. [Gradientes turvos](https://gradiently.design/pt-pt/guide/muddy-gradients) explica porque é que as misturas intermédias perdem contraste de luminosidade à partida.

## Passo 3: foge da armadilha dos tons médios

Olha para a linha do magenta na tabela: 4.7:1 com branco e 4.2:1 com quase preto. Nenhuma das tintas tem grande margem. As cores de luminosidade média ficam no meio da maioria dos gradientes, que é exatamente onde as pessoas tendem a centrar o texto. O texto pequeno ali fica no limite, seja qual for a tinta que escolheres.

- **Move o texto** para a ponta mais escura ou mais clara.
- **Desloca o gradiente** para que a paragem por trás do texto fique mais escura ou mais clara.
- **Torna o texto grande e em negrito**, para que se aplique o limite mais baixo de 3:1 para texto grande.
- **Reserva os tons médios** para decoração, formas e espaço, 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);
}
```

Construir a zona calma num gradiente CSS: o título fica limitado aos 40 por cento da esquerda, que assentam por inteiro na paragem escura.

## Passo 4: usa o tamanho e o peso

Letras mais pesadas e maiores têm mais área e são lidas como formas, por isso toleram melhor um fundo em mudança. Os pesos finíssimos e leves desfazem-se à medida que a cor por trás muda. Num gradiente, compõe o texto corrido em regular, médio ou negrito em vez de pesos leves, e mantém os títulos generosos. [Tipos de letra para redes sociais](https://gradiently.design/pt-pt/guide/fonts-for-social-media) reúne tipos robustos que se leem bem em telemóveis.

Uma publicação vertical com um título em negrito sobre a zona mais calma de um fundo com gradiente

Texto grande e robusto colocado na parte mais calma do gradiente, com a tinta escolhida em função do que fica por trás.

## Passo 5: testa no tamanho de um telemóvel e em tons de cinzento

1. **Mede o pior ponto** Recolhe a cor mais clara por trás do texto claro, ou a mais escura por trás do texto escuro, e verifica o rácio.
2. **Vê em tons de cinzento** Tira a saturação a uma cópia do design. Sem o tom, o fraco contraste de luminosidade salta à vista.
3. **Vê num telemóvel** Ao comprimento do braço, à luz do dia se puderes. É aí que o texto pequeno sobre gradientes falha primeiro.
4. **Semicerra os olhos** Fecha os olhos até meio. O texto deve continuar a destacar-se do fundo como forma.

Para fundos mais carregados do que um gradiente, como fotografias e texturas, vê [texto sobre fundos carregados](https://gradiently.design/pt-pt/guide/type-on-busy-backgrounds). Na Gradiently, os Marks deslocam a sua zona mais calma 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, por isso o método acima acontece enquanto escreves.

## FAQ

### Que cor de texto funciona sobre um fundo com gradiente?

Depende da luminosidade por trás do texto: branco ou um tom pálido sobre paragens escuras, quase preto ou uma sombra profunda sobre paragens claras. O tom importa muito menos do que a luminosidade.

### Como verifico o contraste num gradiente?

Mede o rácio no pior ponto por trás do texto, não na média. O texto normal precisa de pelo menos 4.5:1 e o texto grande de pelo menos 3:1.

### Onde devo pôr o texto num gradiente?

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

### Porque é que o texto é difícil de ler no meio do meu gradiente?

As cores de luminosidade média dão pouco contraste tanto com texto branco como com preto. Move o texto para uma das pontas, desloca o gradiente ou torna o texto grande e em negrito.