Texto sobre fundos carregados, sem recorrer a uma caixa

Tornar legível o texto sobre um fundo carregado resume-se a duas coisas: o que está mesmo por trás das letras e a cor das letras. As soluções comuns, uma caixa, uma sombra ou um desfoque, mudam o que está por trás das letras tapando-o. As melhores soluções põem as palavras onde o fundo já é calmo, escolhem a tinta para cada linha e, quando a ferramenta o permite, deixam o fundo abrir espaço em vez de ser remendado.

Porque é que os fundos carregados e o texto lutam

Ler depende do contraste entre cada letra e o que a rodeia. Sobre uma cor lisa, esse contraste é igual em todo o lado. Sobre uma fotografia, um padrão ou um gradiente animado, muda constantemente: uma letra assenta num realce, a seguinte numa sombra, e a palavra parte-se em pedaços. O detalhe piora tudo, porque as arestas e formas do próprio fundo parecem-se um pouco com traços de letras, e o olhar tem de separar as duas coisas.

É por isso que as orientações de contraste, como os rácios em contraste de cor, são difíceis de aplicar em fundos carregados: não há uma única cor de fundo para medir. O teste honesto é o pior ponto, a zona mais clara por trás de texto claro ou a mais escura por trás de texto escuro.

As soluções habituais, e o que cada uma custa

Todas as soluções clássicas funcionam mudando o que está mesmo por trás das letras. Todas são legítimas, e todas tiram alguma coisa ao fundo que escolheste.

Se usares uma, usa-a com suavidade. Um sombreado que desvanece ao longo de uma área grande nota-se menos do que uma caixa, e uma sombra suave e larga parece menos datada do que uma dura. Eis 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: põe as palavras onde o fundo é calmo

A maioria dos fundos carregados tem uma zona mais tranquila: um pedaço de céu, uma mancha suave de cor, uma área desfocada. Mover o texto para ali, ou recortar para que essa zona caia onde vai o texto, resolve o problema sem tapar nada. Quando escolheres ou criares um fundo, procura um com uma zona calma onde as tuas palavras costumam ficar.

A mesma ideia aplica-se às fotografias, onde o recorte, o desfoque e o duotone podem todos criar calma; texto sobre imagem percorre sete técnicas. Nos gradientes, a zona calma costuma ser onde a cor muda mais devagar; texto sobre gradiente mostra como encontrá-la.

Escolhe a tinta para cada linha

Um fundo que vai do claro ao escuro não pode ser servido por uma só cor de tinta. O texto branco lê-se na metade escura e desaparece na metade clara. Em vez de forçares um painel por trás, escolhe a tinta linha a linha: tinta clara onde o fundo por trás dessa linha é escuro, tinta escura onde é claro. Tira as duas tintas da própria paleta do fundo, um tom profundo e um pálido, para parecerem parte do design e não coladas por cima.

Deixa o fundo mexer-se, não as palavras

A solução mais discreta de todas é um fundo que sabe onde estão as palavras. É assim que um Mark da Gradiently se comporta: em vez de ser tapado, reorganiza-se. Todo o material desliza para que a sua zona mais calma e com melhor contraste fique por trás do texto; perto das letras, as cores aprofundam-se por baixo do texto claro e clareiam por baixo do texto escuro; os relevos carregados acalmam. Nada disto é uma forma que se possa apontar. Lê-se como o design, porque é o design.

A outra metade é a tinta. Define o texto como tinta automática e cada linha escolhe a tinta clara ou escura que melhor se lê contra o que está realmente por trás, a partir de um par tirado da própria paleta do Mark. Move um título de uma zona clara para uma escura e ele troca discretamente. Tu decides com que força o fundo responde: quase impercetível, equilibrado, ou um palco claro para um título que tem de acertar.

A melhor solução de legibilidade é a que ninguém nota.

Uma lista de verificação para texto sobre fundos carregados

1. 1

   Encontra primeiro a zona calma

   Posiciona ou recorta para que as palavras fiquem sobre a parte mais uniforme do fundo.

2. 2

   Verifica o pior ponto

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

3. 3

   Escolhe a tinta por linha

   Clara sobre escuro, escura sobre claro, ambas tiradas da paleta do fundo.

4. 4

   Usa o peso e o tamanho

   Texto mais pesado e maior aguenta fundos mais carregados. Os pesos finíssimos não. Tipos de letra para redes sociais tem tipos que resistem.

5. 5

   Remenda só em último recurso

   Se tiver de ser, usa a solução mais suave: um sombreado leve em vez de uma caixa, uma sombra larga e ténue em vez de uma dura.