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

Texto sobre imagem continua legível quando a área logo atrás das letras é calma e nitidamente mais clara ou mais escura que o texto. Sete técnicas levam você até lá: recortar para que as palavras caiam em uma área tranquila, adicionar um scrim, tingir a foto, desfocá-la, emoldurar o texto, escolher a cor pela luminosidade e posicionar as palavras onde o olhar já descansa. A maioria dos bons designs combina duas delas, e nenhuma precisa de uma caixa sólida sobre a foto.

O mesmo problema aparece com gradientes e fundos estampados; texto sobre gradiente e texto sobre fundos carregados tratam desses casos. Este guia fala de fotos.

Por que o texto some nas fotos

Duas coisas dificultam a leitura de letras sobre uma imagem: pouco contraste e excesso de detalhe. Pouco contraste quer dizer que as letras têm luminosidade parecida demais com o que está atrás delas, como texto branco sobre um céu claro. Excesso de detalhe quer dizer que o fundo tem bordas e texturas na mesma escala das letras, como folhas, multidões ou tecido, e o olho não consegue separar uma coisa da outra. Cada técnica abaixo reduz um desses problemas ou os dois.

Sete técnicas para texto legível sobre imagens

1. Recorte para uma área calma

Antes de acrescentar qualquer coisa, mova a foto. A maioria das fotos tem uma região tranquila: céu, uma parede, água, sombra, um fundo desfocado. Recorte ou reposicione para que as palavras caiam ali. É a única técnica que não acrescenta nada, e por isso fica a mais limpa. Quando for fotografar para um design, deixe esse espaço de propósito.

2. Adicione um scrim

Um scrim é um gradiente suave do escuro ao transparente, colocado só onde fica o texto, geralmente na parte de baixo ou de cima da imagem. Ele escurece a área atrás das palavras e some antes de chegar ao assunto da foto, então quase toda a imagem parece intacta. É a técnica padrão para cards, imagens de destaque e thumbnails 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. Tinja a foto: duotone ou véu de cor

Mapear uma foto em duas cores (um duotone) ou cobrir a foto com um véu de uma cor só comprime a faixa de luminosidade dela. A foto fica mais calma e uniforme, e um texto em cor contrastante se lê em qualquer ponto. Isso também traz as fotos para as cores da sua marca, o que ajuda quando as imagens vêm de muitas fontes.

4. Desfoque atrás das palavras

O desfoque remove o detalhe fino que briga com as letras e mantém a cor e a luz da foto. Desfoque a imagem inteira para um fundo suave ou só uma faixa atrás do texto. Use desfoque suficiente para as bordas sumirem; um desfoque leve só parece um erro. Fundos desfocados mostra quanto usar.

5. Emoldure o texto

Às vezes a resposta certa é um espaço livre: uma faixa de cor sólida, um painel ou um layout dividido, com a foto de um lado e as palavras do outro. É honesto e sempre legível. Tire a cor da moldura da própria foto, para que ela pertença à imagem em vez de cobri-la.

6. Escolha a cor do texto pela luminosidade

Decida entre texto claro e escuro pela luminosidade da área atrás dele, não pela cor de que você gosta. Depois confira: busque pelo menos 4,5:1 para texto normal e 3:1 para texto grande, os níveis de contraste da WCAG. Colete os pixels mais claros e mais escuros atrás das letras e teste os dois em 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 texto pequeno, mas não salva um recorte ruim.

7. Posicione as palavras onde o olhar descansa

Coloque o texto onde a foto conduz o olhar: ao longo do horizonte, no espaço para onde uma pessoa está olhando ou do lado oposto ao assunto. Evite palavras sobre rostos, mãos ou o produto e mantenha o texto longe das bordas que as plataformas cobrem com botões ou cortam em algumas telas.

Qual técnica usar em cada tipo de foto

Como manter o texto sobre imagens consistente em uma marca

Quando várias pessoas fazem os posts, escolha uma ou duas técnicas e registre por escrito: por exemplo, um scrim na parte de baixo com uma intensidade fixa em todo post com foto e um duotone nas cores da marca para citações. No Studio do Gradiently, as fotos podem ser recortadas e tingidas nas cores do Mark em mono, duotone ou véu de cor, então os posts com foto ficam na mesma família do resto dos seus designs. Registre a regra no seu guia de estilo da marca.