Texto sobre imagem: sete formas de manter as palavras legíveis

O texto sobre imagem mantém-se legível quando a zona mesmo por trás das letras é calma e claramente mais clara ou mais escura do que o texto. Há sete técnicas para lá chegar: recortar para que as palavras caiam numa zona tranquila, juntar um sombreado, tingir a fotografia, desfocá-la, emoldurar o texto, escolher a tinta pela luminosidade e pôr as palavras onde o olhar já descansa. A maioria dos bons designs combina duas delas, e nenhuma precisa de uma caixa sólida por cima da fotografia.

O mesmo problema aparece com gradientes e fundos com padrões; texto sobre gradiente e texto sobre fundos carregados tratam esses casos. Este guia foca-se nas fotografias.

Porque é que o texto desaparece nas fotografias

Há duas coisas que tornam as letras difíceis de ler numa imagem: pouco contraste e detalhe. Pouco contraste significa que as letras estão demasiado próximas em luminosidade do que está por trás, como texto branco sobre um céu claro. Detalhe significa que o fundo tem arestas e texturas à mesma escala das letras, como folhas, multidões ou tecido, e o olhar não consegue separar uma coisa da outra. Cada técnica abaixo reduz um dos dois, ou ambos.

Sete técnicas para texto legível sobre imagens

1. Recorta para uma zona calma

Antes de acrescentar o que quer que seja, mexe na fotografia. A maioria das fotografias tem uma zona tranquila: céu, uma parede, água, sombra, um fundo desfocado. Recorta ou reposiciona para que as palavras caiam ali. É a única técnica que não acrescenta nada, e é por isso que fica tão limpa. Quando fotografares para um design, deixa esse espaço de propósito.

2. Junta um sombreado

Um sombreado é um gradiente suave de escuro para transparente, colocado apenas onde o texto fica, normalmente na parte de baixo ou de cima da imagem. Escurece a zona por trás das palavras e desvanece antes de chegar ao motivo, por isso a maior parte da fotografia parece intacta. É a técnica habitual para cartões, imagens de destaque e miniaturas de vídeo.

.photo-card {
  position: relative;
  isolation: isolate;
}

.photo-card img {
  position: relative;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The scrim: dark at the bottom, clear by 60% up. */
.photo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgb(0 0 0 / 0.72) 0%,
    rgb(0 0 0 / 0.38) 30%,
    rgb(0 0 0 / 0) 60%
  );
}

.photo-card h2 {
  position: absolute;
  inset-inline: 1.5rem;
  bottom: 1.5rem;
  color: #fff;
  text-wrap: balance;
}

3. Tinge a fotografia: duotone ou camada de cor

Mapear uma fotografia para duas cores (um duotone) ou pôr-lhe por cima uma camada de uma só cor comprime a sua gama de luminosidade. A fotografia fica mais calma e mais uniforme, e o texto numa tinta que contraste lê-se em qualquer ponto. Também traz as fotografias para as cores da tua marca, o que dá jeito quando as imagens vêm de muitas fontes.

4. Desfoca por trás das palavras

O desfoque retira o detalhe fino que luta com as letras e mantém a cor e a luz da fotografia. Desfoca a imagem inteira para um fundo suave, ou desfoca só uma faixa por trás do texto. Usa desfoque suficiente para as arestas desaparecerem; um desfoque ligeiro parece apenas um erro. Fundos desfocados explica quanto usar.

5. Emoldura o texto

Às vezes, a resposta certa é um espaço limpo: uma faixa de cor sólida, um painel, ou um layout dividido com a fotografia de um lado e as palavras do outro. É honesto e lê-se sempre. Tira a cor da moldura da fotografia para que pertença à imagem em vez de a tapar.

6. Escolhe a tinta pela luminosidade

Decide entre texto claro e escuro pela luminosidade da zona por trás e não pela cor de que gostas. Depois confirma: aponta para pelo menos 4.5:1 no texto normal e 3:1 no texto grande, os níveis de contraste da WCAG. Recolhe os píxeis mais claros e mais escuros por trás das letras e testa ambos com uma ferramenta como o verificador de contraste da WebAIM. Uma sombra suave, como text-shadow: 0 1px 12px rgb(0 0 0 / 0.45), pode ajudar o texto pequeno, mas não salva um mau recorte.

7. Põe as palavras onde o olhar descansa

Põe o texto para onde a fotografia conduz o olhar: ao longo de um horizonte, no espaço para onde uma pessoa está a olhar, ou do lado oposto ao motivo. Evita pôr palavras sobre rostos, mãos ou o produto, e mantém-nas longe das margens que as plataformas tapam com botões ou cortam em alguns ecrãs.

Que técnica usar em cada fotografia

Manter o texto sobre imagens coerente em toda a marca

Quando várias pessoas fazem publicações, escolhe uma ou duas técnicas e escreve-as: por exemplo, um sombreado em baixo com uma intensidade fixa em todas as publicações com fotografia, e um duotone nas cores da marca para citações. No Studio da Gradiently, as fotografias podem ser recortadas e tingidas nas cores do Mark em mono, duotone ou camada de cor, para que as publicações com fotografia fiquem na mesma família que o resto dos teus designs. Regista a regra no teu guia de estilo da marca.