Texto sobre fundo gradiente: como garantir a leitura sempre

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.

Os limites vêm das orientações de contraste da WCAG: 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 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.

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?

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 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.

.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);
}

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 lista fontes robustas que se leem bem no celular.

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

1. 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. 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. 3

   Olhe no celular

   Com o braço esticado, na luz do dia se puder. Texto pequeno sobre gradiente falha ali primeiro.

4. 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. 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.