Contraste de cor: texto legível para todos

O contraste de cor é a diferença de luminosidade entre o texto e a cor que está por trás, e decide se as pessoas conseguem sequer ler as tuas palavras. As Diretrizes de Acessibilidade para o Conteúdo da Web (WCAG) medem-no como um rácio de 1:1, em que as duas cores são idênticas, a 21:1, preto sobre branco. Para o nível AA, o texto normal precisa de pelo menos 4,5:1 e o texto grande de pelo menos 3:1. Tudo o resto neste guia trata de atingir esses números sem tornar o teu design tímido.

O contraste importa a toda a gente, não só a quem tem visão reduzida. Telemóveis ao sol, projetores fracos, monitores baratos e olhos cansados reduzem a diferença entre cores. Os designs com contraste suficiente são simplesmente mais lidos.

Os rácios de contraste das WCAG em palavras simples

Três regras das WCAG 2 cobrem quase todas as decisões de design. Vêm dos critérios de êxito do W3C e são aquilo a que se referem a maioria das auditorias e regulamentos de acessibilidade.

Dois pormenores apanham as pessoas desprevenidas. Primeiro, “grande” refere-se ao tamanho apresentado, por isso um título de 24 px num telemóvel que o reduz pode deixar de contar como grande. Segundo, um botão desativado está isento, mas um texto de exemplo cinzento-claro que as pessoas precisam de compreender não está.

Como se calcula o rácio de contraste

O rácio compara a luminância relativa das duas cores: quanta luz cada uma emite, ponderada da forma como o olho vê. O verde contribui mais, o vermelho menos e o azul muito pouco, e é por isso que um azul saturado pode ser surpreendentemente escuro e um amarelo surpreendentemente claro. A fórmula é (L1 + 0.05) / (L2 + 0.05), em que L1 é a cor mais clara.

// WCAG 2 contrast ratio between two hex colours
const channel = (c) => {
  c /= 255
  return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4
}
const luminance = (hex) => {
  const [r, g, b] = [1, 3, 5].map((i) => channel(parseInt(hex.slice(i, i + 2), 16)))
  return 0.2126 * r + 0.7152 * g + 0.0722 * b
}
const contrast = (a, b) => {
  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x)
  return (hi + 0.05) / (lo + 0.05)
}

contrast('#767676', '#ffffff') // 4.54, passes for body text
contrast('#777777', '#ffffff') // 4.48, fails

Não precisas de o calcular à mão. O verificador de contraste da WebAIM recebe dois códigos hexadecimais e diz-te que níveis passam, e o seletor de cor das ferramentas de programador do Chrome mostra o rácio de qualquer texto que inspecionares.

Pares de cores que passam e que falham

As cores da marca ficam muitas vezes num meio-termo incómodo, demasiado escuras para texto escuro e demasiado claras para texto branco. Os verdes, laranjas, rosas e azuis-claros médios são os suspeitos habituais. Estas são combinações comuns, com os seus rácios reais.

Porque é que os gradientes tornam o contraste mais difícil

Um fundo liso tem um só rácio de contraste. Um gradiente tem um diferente em cada ponto. O texto branco que passa facilmente sobre a ponta escura de uma mistura pode falhar por completo na ponta clara, e um título que se estende por todo o gradiente passa e falha na mesma linha.

A regra é simples: testa o ponto mais claro por trás de texto claro, ou o ponto mais escuro por trás de texto escuro. Se o pior ponto passar, a linha toda passa. As cores médias e as amostras do conta-gotas a meio vão induzir-te em erro.

Como corrigir o contraste num gradiente

1. 1

   Leva as palavras para a ponta calma

   Coloca o texto sobre a parte mais escura ou mais clara do gradiente e deixa a transição luminosa acontecer longe dele.

2. 2

   Estreita a gama por trás do texto

   Mantém a parte do gradiente que fica por trás das palavras dentro de uma pequena gama de luminosidade. O resto da tela pode ser tão ousado quanto quiseres.

3. 3

   Acrescenta uma película suave

   Um esbatido suave, escuro ou claro, por trás do texto, como um gradiente de transparente a preto a 30%, aumenta o contraste sem uma caixa visível.

4. 4

   Vai maior e mais forte

   O texto grande só precisa de 3:1. Um peso mais forte e um tamanho maior podem transformar uma linha que falha numa que passa.

5. 5

   Testa num telemóvel real

   Verifica o design com o brilho no máximo e com pouco brilho, ao ar livre se puderes. Os rácios são o mínimo, não o objetivo.

.card {
  background: linear-gradient(90deg, #1f0b3a 0%, #7c3aed 55%, #f472b6 100%);
  color: #ffffff;
}
/* A soft scrim keeps white text above 4.5:1 across the pink end */
.card .text {
  background: linear-gradient(90deg, transparent 0%, rgb(31 11 58 / 0.55) 60%);
  padding: 1rem 1.25rem;
}

É esta a ideia por trás da legibilidade da Gradiently: um Mark sabe onde estão as tuas palavras, move a sua região mais calma e de melhor contraste para trás delas e escolhe tinta clara ou escura por linha a partir da sua própria paleta. Para mais técnicas que funcionam em qualquer lado, lê texto sobre um gradiente e texto legível sobre fotografias. Para interfaces escuras em particular, vê desenhar para o modo escuro.