Contraste de cor e paletas acessíveis

O que a razão realmente mede

Uma razão de contraste compara a luminância relativa de duas cores — grosso modo, quanta luz cada uma emite — numa escala que vai de 1:1 para cores idênticas a 21:1 para preto sobre branco. Luminância não é a média dos canais: o verde contribui muito mais que o vermelho, e o vermelho muito mais que o azul, porque a visão humana é mais sensível no meio do espectro. Essa ponderação é o motivo de um texto amarelo vivo sobre branco reprovar feio enquanto o mesmo amarelo sobre preto passa com folga.

A consequência é que o matiz quase não importa e a luminosidade domina. Dois matizes vivos e obviamente diferentes com a mesma luminosidade praticamente não têm contraste por essa medida — exatamente o caso em que designers mais se surpreendem com uma nota reprovada. Se uma combinação reprova, mudar a luminosidade resolve; mudar o matiz normalmente não.

Os limiares e qual deles se aplica

A WCAG pede 4,5:1 para texto normal e 3:1 para texto grande, onde grande significa cerca de 24px, ou 19px em negrito. Esse é o nível AA; o nível AAA sobe para 7:1 e 4,5:1. A permissão para texto grande existe porque traços mais grossos cobrem mais pixels e continuam legíveis com menos contraste — é uma concessão ao peso da letra, não uma brecha.

Elementos não textuais têm regra própria, frequentemente esquecida: componentes de interface e gráficos com significado precisam de 3:1 em relação ao que está ao lado. Isso cobre a borda de um campo, o anel de foco, a barra de um gráfico, um ícone que carrega significado sozinho. Os infratores habituais são o texto de espaço reservado e os controles desabilitados, muitas vezes bem abaixo de qualquer limiar sob o argumento de que parecem intencionalmente apagados.

Passar na razão não é o mesmo que ser legível

A razão não sabe nada sobre tipografia. As mesmas cores a 4,6:1 são confortáveis em 16px com peso regular e sofridas em 12px com peso leve, porque traços finos cobrem menos pixels e perdem mais na suavização. Atingir o limiar é um piso, não uma meta, e o texto de leitura normalmente quer superá-lo com folga.

A razão também não sabe o que está atrás do seu texto. Texto sobre uma fotografia, um gradiente ou um vídeo tem contraste diferente em cada região, e o número calculado contra um pixel amostrado nada diz sobre o resto. Esses casos pedem uma camada de atenuação, um painel sólido ou uma sombra — algo que garanta um fundo conhecido em vez de torcer por um.

O daltonismo muda quais pares funcionam

Cerca de um em cada doze homens tem alguma deficiência na visão de cores, mais comumente dificuldade para separar vermelho de verde. As razões de contraste resistem razoavelmente bem a isso, já que são governadas pela luminosidade — mas qualquer informação carregada apenas pelo matiz, não. Um ponto de status vermelho contra verde, um gráfico cuja única legenda é a cor, um link distinguido do texto só pela cor e sem sublinhado: cada um é invisível para uma fatia considerável de leitores.

A regra que decorre é simples: nunca deixe a cor ser o único canal. Acrescente uma forma, um ícone, um rótulo, um padrão ou uma diferença de luminosidade. Conferir um design com uma simulação das deficiências comuns é rápido e costuma pegar justamente os gráficos e indicadores de status que os verificadores automáticos de contraste aprovam sem reclamar.

Montar uma paleta que se sustenta

A abordagem mais confiável é projetar em degraus de luminosidade em vez de escolher cores uma a uma. Fixe uma escada de valores de luminosidade, gere cada matiz em cada degrau, e as combinações ficam previsíveis: dois degraus suficientemente distantes vão passar, independentemente do matiz. Espaços de cor perceptuais tornam isso bem mais fácil que o HSL, cuja luminosidade não é perceptualmente uniforme — duas cores HSL com o mesmo valor podem parecer muito diferentes em brilho.

Uma lista prática:

• Texto normal 4,5:1, texto grande 3:1, bordas de interface e ícones com significado 3:1.
• Corrija reprovações mudando a luminosidade, não o matiz.
• Verifique os estados de espaço reservado, desabilitado e foco — são os que mais falham.
• Nunca codifique informação apenas no matiz; some forma, rótulo ou luminosidade.
• Teste os dois temas: uma paleta que passa no modo claro pode reprovar invertida.