Contraste de cores: texto legível para todos

O contraste de cores é a diferença de brilho entre o texto e a cor atrás dele, e decide se as pessoas conseguem ler suas palavras. As Diretrizes de Acessibilidade para Conteúdo Web (WCAG) o medem como uma razão de 1:1, quando 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. Todo o resto deste guia é sobre atingir esses números sem deixar seu design tímido.

O contraste importa para todo mundo, não só para quem tem baixa visão. Celulares sob o sol, projetores fracos, monitores baratos e olhos cansados diminuem a diferença entre as cores. Designs com contraste suficiente simplesmente são mais lidos.

As razões de contraste do WCAG em palavras simples

Três regras do WCAG 2 cobrem quase toda decisão de design. Elas vêm dos critérios de sucesso do W3C e são as que a maioria das auditorias de acessibilidade e das normas cita.

Dois detalhes pegam as pessoas de surpresa. Primeiro, “grande” depende do tamanho renderizado, então um título de 24 px em um celular que o reduz pode deixar de contar como grande. Segundo, um botão desativado está isento, mas um texto de exemplo em cinza-claro que as pessoas precisam entender não está.

Como a razão de contraste é calculada

A razão compara a luminância relativa das duas cores: quanta luz cada uma emite, ponderada do jeito que 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

Você não precisa calcular à mão. O verificador de contraste da WebAIM recebe dois códigos hex e diz quais níveis passam, e o seletor de cor das ferramentas de desenvolvedor do Chrome mostra a razão de qualquer texto que você inspecionar.

Pares de cores que passam e que falham

As cores de marca costumam ficar no meio incômodo: escuras demais para texto escuro e claras demais para texto branco. Verdes, laranjas, rosas e azuis-claros médios são os suspeitos de sempre. Estas são combinações comuns, com as razões reais.

Por que os gradientes dificultam o contraste

Um fundo liso tem uma única razão de contraste. Um gradiente tem uma diferente em cada ponto. Um texto branco que passa fácil sobre a ponta escura de uma mistura pode falhar por completo na ponta clara, e um título que se estende pelo gradiente passa e falha na mesma linha.

A regra é simples: teste o ponto mais claro atrás de texto claro, ou o ponto mais escuro atrás de texto escuro. Se o pior ponto passa, a linha toda passa. Cores médias e amostras de conta-gotas tiradas do meio vão enganar você.

Como corrigir o contraste em um gradiente

1. 1

   Leve as palavras para a ponta calma

   Coloque o texto sobre a parte mais escura ou mais clara do gradiente e deixe a transição brilhante acontecer longe dele.

2. 2

   Estreite a faixa atrás do texto

   Mantenha a parte do gradiente que fica atrás das palavras dentro de uma faixa pequena de luminosidade. O resto da tela pode ser tão ousado quanto você quiser.

3. 3

   Adicione um véu suave

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

4. 4

   Vá 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 em uma que passa.

5. 5

   Teste em um celular de verdade

   Confira o design com o brilho no máximo e com o brilho baixo, ao ar livre se puder. As razões são o piso, 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;
}

Essa é a ideia por trás da legibilidade do Gradiently: um Mark sabe onde estão suas palavras, move sua região mais calma e de melhor contraste para trás delas e escolhe tinta clara ou escura por linha a partir da própria paleta. Para mais técnicas que funcionam em qualquer lugar, leia texto sobre gradiente e texto legível sobre fotos. Para interfaces escuras em particular, veja design para modo escuro.