Fundo para texto: o que torna as palavras fáceis de ler

Um bom fundo para texto tem três coisas na zona atrás das palavras: contraste forte com as letras, muito pouco pormenor fino e uma gama de tons uniforme em vez de manchas claras e escuras. A cor importa muito menos do que as pessoas pensam. Um gradiente violeta pode sustentar texto lindamente e uma fotografia cinzenta pode estragá-lo, consoante essas três propriedades. Este guia mostra como avaliar qualquer fundo, fotografia, gradiente ou textura, e o que fazer quando um falha.

Contraste: a primeira propriedade

O contraste é a diferença de luminosidade entre as letras e o que está mesmo atrás delas. As Diretrizes de Acessibilidade para o Conteúdo Web definem a fasquia mensurável: uma razão de pelo menos 4,5:1 para texto normal e 3:1 para texto grande. O verificador de contraste da WebAIM calcula-a para quaisquer duas cores.

Numa cor lisa, uma verificação basta. Num gradiente ou numa fotografia, o fundo muda sob cada palavra, por isso verifica o ponto mais claro atrás de texto claro e o mais escuro atrás de texto escuro. É aí que o texto falha primeiro. Contraste de cor e acessibilidade aprofunda as normas.

Pormenor: porque é que os fundos confusos são difíceis de ler

O contraste é necessário mas não chega. Um fundo cheio de pormenor do tamanho das letras dificulta a leitura mesmo quando a razão passa, porque o olho não consegue separar as formas das letras das formas que estão atrás. Folhas, gravilha, multidões, riscas finas e padrões pequenos são os piores. Formas grandes e suaves são as melhores: um céu, uma parede desfocada, um gradiente liso.

A textura não faz mal quando o seu grão é muito mais pequeno do que as letras, como o grão de película ou o dente do papel. Torna-se um problema quando as formas da textura se aproximam do tamanho dos traços do teu texto. Se gostas de um padrão, aumenta-o até as suas formas serem claramente maiores do que as letras, ou mantém-no longe das palavras. Texto sobre fundos confusos trata dos padrões com mais pormenor, e texto legível sobre fotografias trata das imagens.

Gama de tons: manchas claras e escuras sob a mesma linha

A terceira propriedade é a que apanha as pessoas desprevenidas. Se uma só linha de texto atravessar uma mancha clara e uma escura, nenhuma cor de texto única funciona: o branco desaparece na parte clara e o preto na escura. Um bom fundo para texto mantém uma gama de tons estreita sob cada linha, toda clara ou toda escura.

Como testar qualquer fundo para texto

1. 1

   Semicerra os olhos

   Fecha meio os olhos. O pormenor esbate-se e só resta o tom. Se as palavras se dissolvem no fundo, o contraste é demasiado baixo.

2. 2

   Desfoca

   Aplica um desfoque forte a uma cópia só do fundo. O que sobrar sob a zona do texto é o tom em que as letras realmente assentam.

3. 3

   Vê em escala de cinzentos

   A cor pode enganar-te e fazer-te pensar que o contraste está bem. A escala de cinzentos mostra só a luminosidade, que é de que a legibilidade depende.

4. 4

   Verifica os extremos

   Mede o contraste nos pontos mais claro e mais escuro atrás das palavras, não na média.

5. 5

   Olha para ele num telemóvel

   À distância do braço, à luz do dia, ao tamanho em que as pessoas o vão realmente ver.

Corrigir um fundo que luta contra o texto

A maioria das correções acrescenta algo: uma caixa, uma sombra, uma faixa escura. Funcionam, mas cada uma é um remendo que faz o design parecer salvo à pressa. Experimenta as correções por esta ordem, da menos visível à mais visível.

Na web, uma sobreposição suave de gradiente num dos lados de uma imagem de hero é uma versão respeitável da quinta correção: escurece só a zona sob as palavras e deixa o resto da imagem em paz.

.hero {
  min-height: 70vh;
  color: #ffffff;
  background-image:
    linear-gradient(90deg, rgb(15 12 30 / 0.85) 0%, rgb(15 12 30 / 0.45) 45%, rgb(15 12 30 / 0) 70%),
    url("/images/hero.jpg");
  background-size: cover;
  background-position: center;
}

O Gradiently incorpora no próprio fundo as correções menos visíveis. Um Mark sabe onde estão as tuas palavras: a sua região mais calma e de melhor contraste desloca-se para trás do texto, as cores junto às letras escurecem ou clareiam, o pormenor confuso relaxa, e a tinta automática escolhe texto claro ou escuro para cada linha a partir da paleta do Mark. Não há caixas, sombras nem desfoque, e tu escolhes com que força responde. Como funciona a tinta automática explica os pormenores, e texto sobre um gradiente dá o método manual para qualquer gradiente.