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

[Canonical HTML page](https://gradiently.design/pt-br/guide/text-over-image)

Uma foto que fica ótima sozinha pode engolir qualquer título colocado sobre ela. Estas sete técnicas mantêm as palavras legíveis sem esconder a imagem atrás de uma caixa.

## The short version

- Texto sobre uma imagem fica legível quando a área logo atrás das letras é calma e nitidamente mais clara ou mais escura que o texto.
- A solução mais rápida costuma ser um recorte melhor, que coloque as palavras sobre céu, parede, sombra ou outra parte tranquila da foto.
- Um scrim, um gradiente suave do escuro ao transparente atrás do texto, mantém as palavras legíveis e deixa quase toda a foto intacta.
- Duotone, desfoque e véus de cor acalmam uma foto carregada para que o texto possa ficar em qualquer lugar dela.
- Confira o contraste onde o texto realmente está e busque pelo menos 4,5:1 para texto normal e 3:1 para texto grande.

**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](https://gradiently.design/pt-br/guide/text-on-gradient) e [texto sobre fundos carregados](https://gradiently.design/pt-br/guide/type-on-busy-backgrounds) 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.

Um post vertical em que o título passa pela parte mais carregada de um fundo colorido e fica difícil de ler

Palavras direto sobre um campo carregado: brilho e detalhe competem com as letras.

O mesmo post vertical com o fundo mais calmo e mais profundo atrás do título, que agora se lê com clareza

O mesmo design com uma área mais calma e de melhor contraste atrás das palavras.

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

```css
.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;
}
```

Um scrim na parte de baixo com três paradas, para que o esmaecimento não tenha borda visível. Mantenha o ponto mais escuro embaixo das palavras, não na imagem inteira.

### 3. Tinja a foto: duotone ou véu de cor

Mapear uma foto em duas cores (um [duotone](https://gradiently.design/pt-br/guide/duotone-effect)) 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.

- Tinta das sombras: #1b1340
- Pêssego das luzes: #f7c7a3
- Texto sobre sombra: #ffffff
- Texto sobre luz: #1b1340

Um par de duotone e as duas cores de texto dele. Como a foto só tem tons entre as duas cores, o branco se lê na metade escura e a tinta escura na metade clara.

### 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](https://gradiently.design/pt-br/guide/blurred-background) 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](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html). 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](https://webaim.org/resources/contrastchecker/). 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

| Foto | Primeira opção | Alternativa |
| --- | --- | --- |
| Área tranquila clara, como céu ou parede | Recortar para ela | Scrim leve para ter mais margem |
| Carregada no todo, como multidões ou folhagem | Duotone ou véu de cor | Desfocar a imagem inteira |
| Assunto no alto, detalhe embaixo | Scrim na parte de baixo | Moldura com uma faixa de cor |
| Clara e de alto contraste | Texto escuro sobre a área mais clara | Véu para comprimir a faixa |
| Muitas fotos que precisam parecer consistentes | O mesmo tingimento para todas | O mesmo scrim para todas |

Comece pela intervenção mais leve que funcionar e combine duas só quando uma não bastar.

### Evite

- Uma caixa sólida jogada no meio da foto
- Contornos ou brilhos pesados em volta de cada letra
- Texto sobre um rosto ou sobre o produto
- Conferir o contraste só na tela de edição

### Faça

- Recorte primeiro e depois acrescente o mínimo possível
- Um scrim suave que some antes do assunto
- Palavras no espaço que a foto deixa livre
- Conferir no tamanho real, no celular

## 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](https://gradiently.design/pt-br/guide/brand-style-guide).

## FAQ

### Como deixar texto legível sobre uma imagem?

Coloque as palavras sobre uma área calma e com contraste forte. Primeiro recorte para uma parte tranquila da foto, depois adicione um scrim, um tingimento ou um desfoque se precisar, e escolha texto claro ou escuro pela luminosidade atrás dele.

### O que é scrim em design?

Scrim é um gradiente suave do escuro (ou do claro) ao transparente colocado atrás do texto em uma imagem. Ele melhora o contraste onde ficam as palavras e deixa quase toda a foto visível.

### Qual taxa de contraste o texto sobre imagem precisa ter?

A WCAG pede pelo menos 4,5:1 para texto normal e 3:1 para texto grande. Em fotos, confira os pontos mais claros e mais escuros atrás das letras, não uma média.

### Sombra no texto basta para deixá-lo legível?

Raramente sozinha. Uma sombra suave ajuda texto pequeno a se separar do fundo, mas um recorte calmo, um scrim ou um tingimento fazem a maior parte do trabalho.