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

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.

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

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?

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

.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: 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 reúne tipos robustos que se leem bem em telemóveis.

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

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