Como colocar texto sobre fundos carregados sem usar uma caixa

Deixar legível um texto sobre fundo carregado depende de duas coisas: o que está logo atrás das letras e qual é a cor delas. As soluções comuns, uma caixa, uma sombra ou um desfoque, mudam o que está atrás das letras cobrindo o fundo. As melhores colocam as palavras onde o fundo já é calmo, escolhem a cor de cada linha e, quando a ferramenta permite, deixam o fundo abrir espaço em vez de receber um remendo.

Por que fundos carregados e texto brigam

A leitura depende do contraste entre cada letra e o que está em volta dela. Em uma cor chapada, esse contraste é igual em todo lugar. Em uma foto, uma estampa ou um gradiente animado, ele muda o tempo todo: uma letra fica sobre um ponto de luz, a seguinte sobre uma sombra, e a palavra se desfaz em pedaços. O detalhe piora tudo, porque as bordas e formas do próprio fundo lembram um pouco os traços das letras, e o olho precisa separar uma coisa da outra.

É por isso que as diretrizes de contraste, como as taxas de contraste de cores, são difíceis de aplicar em fundos carregados: não existe uma única cor de fundo para medir. O teste honesto é o pior ponto, a área mais clara atrás de texto claro ou a mais escura atrás de texto escuro.

As soluções de sempre e o que cada uma custa

Toda solução padrão funciona mudando o que está logo atrás das letras. Todas são legítimas, e todas tiram algo do fundo que você escolheu.

Se usar uma delas, use com delicadeza. Um scrim que esmaece em uma área grande chama menos atenção que uma caixa, e uma sombra suave e larga parece menos datada que uma dura. Esta é uma versão contida para a web:

.hero {
  position: relative;
}

/* A soft scrim: dark at the bottom, where the text sits, gone by the middle. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / 0.55) 0%, rgb(0 0 0 / 0.2) 35%, rgb(0 0 0 / 0) 60%);
  pointer-events: none;
}

.hero h1 {
  position: relative;
  z-index: 1;
  color: #fff;
  /* A wide, faint shadow reads as depth, not as an outline. */
  text-shadow: 0 1px 24px rgb(0 0 0 / 0.35);
}

Melhor: coloque as palavras onde o fundo é calmo

A maioria dos fundos carregados tem uma região mais tranquila: um trecho de céu, uma mancha suave de cor, uma área fora de foco. Mover o texto para lá, ou recortar para que essa região caia onde vai o texto, resolve o problema sem cobrir nada. Ao escolher ou criar um fundo, procure um com uma área calma onde as suas palavras costumam ficar.

A mesma ideia vale para fotos, onde recorte, desfoque e duotone podem criar calma; texto sobre imagem passa por sete técnicas. Em gradientes, a zona calma costuma ficar onde a cor muda mais devagar; texto sobre gradiente mostra como encontrá-la.

Escolha a cor do texto para cada linha

Um fundo que vai do claro ao escuro não é bem atendido por uma só cor de texto. O texto branco se lê na metade escura e some na metade clara. Em vez de forçar um painel atrás dele, escolha a cor por linha: texto claro onde o fundo atrás daquela linha é escuro, texto escuro onde é claro. Tire as duas cores da própria paleta do fundo, um tom profundo e um claro, para que pareçam parte do design e não coladas por cima.

Deixe o fundo se mover, não as palavras

A solução mais discreta de todas é um fundo que sabe onde estão as palavras. É assim que um Mark do Gradiently se comporta: em vez de ser coberto, ele se reorganiza. O material inteiro desliza para que a região mais calma e de melhor contraste fique atrás do texto; perto das letras, as cores escurecem sob texto claro e clareiam sob texto escuro; as cristas carregadas se acalmam. Nada disso é uma forma que dê para apontar. Parece o próprio design, porque é o próprio design.

A outra metade é a cor do texto. Ative a Tinta automática e cada linha escolhe a cor clara ou escura que melhor se lê contra o que realmente está atrás dela, a partir de um par tirado da paleta do próprio Mark. Mova um título de uma área clara para uma escura e ele troca sozinho, sem alarde. Você decide o quanto o fundo reage: quase nada, equilibrado ou um palco claro para um título que precisa causar impacto.

A melhor solução de legibilidade é aquela que ninguém percebe.

Checklist para texto sobre fundos carregados

1. 1

   Encontre primeiro a área calma

   Posicione ou recorte para que as palavras fiquem sobre a parte mais uniforme do fundo.

2. 2

   Confira o pior ponto

   Teste o contraste no ponto mais claro atrás de texto claro ou no mais escuro atrás de texto escuro, não na média.

3. 3

   Escolha a cor por linha

   Claro sobre escuro, escuro sobre claro, as duas cores tiradas da paleta do fundo.

4. 4

   Use peso e tamanho

   Letras mais pesadas e maiores aguentam fundos mais carregados. Pesos finíssimos não aguentam. Fontes para redes sociais traz fontes que resistem.

5. 5

   Remende só em último caso

   Se precisar, use a solução mais delicada: um scrim suave em vez de uma caixa, uma sombra larga e fraca em vez de uma dura.