Verificador de contraste de cores

Texto com pouco contraste é o defeito de acessibilidade mais comum na web, e o mais fácil de corrigir — desde que alguém verifique antes de a paleta ser fechada. A ferramenta acima recebe uma cor de primeiro plano e uma de fundo e informa a taxa de contraste WCAG, junto com os quatro limites de aprovação que importam.

Como funciona

Digite duas cores hexadecimais ou use os seletores nativos. A ferramenta calcula a luminância relativa de cada cor pela fórmula do WCAG 2: cada canal é normalizado para 0–1, linearizado (valores acima de 0,03928 são elevados à potência 2,4 depois de um deslocamento) e então ponderado com 0,2126 para o vermelho, 0,7152 para o verde e 0,0722 para o azul. São esses pesos que fazem o verde dominar e o azul quase não pesar: eles aproximam a sensibilidade da visão humana a cada parte do espectro.

A taxa é então (L_lighter + 0.05) / (L_darker + 0.05), arredondada para duas casas decimais. Ela vai de 1:1 para duas cores idênticas até 21:1 para preto puro sobre branco puro, e é simétrica: trocar primeiro plano e fundo dá o mesmo número.

Quatro resultados são avaliados a partir dessa taxa:

• AA, texto normal — exige 4,5:1. É o limite usado na maioria das auditorias.
• AA, texto grande — exige 3:1. "Grande" significa 18 pt (24 px) em peso normal, ou 14 pt (18,66 px) em negrito.
• AAA, texto normal — exige 7:1.
• AAA, texto grande — exige 4,5:1.

Como ler o resultado

AA é a meta prática. O nível AA do WCAG 2.1 é a referência da maioria das compras públicas, do European Accessibility Act e de regras equivalentes. Vale a pena mirar em AAA no corpo do texto, mas é bem difícil de alcançar com uma paleta de marca, e o próprio WCAG não recomenda exigir AAA de forma geral para sites inteiros.

Componentes de interface têm um limite próprio. O critério de sucesso 1.4.11 exige 3:1 para o contorno visual dos controles — bordas de campos, indicadores de foco, estados de toggles e as partes de um ícone que transmitem significado. Um formulário cujos campos têm um contorno cinza-claro da moda costuma reprovar aqui, mesmo com o texto dentro deles aprovado.

Texto de placeholder é texto. Assim como rótulos desabilitados que as pessoas precisam ler e texto embutido em imagens. Acinzentar um elemento não o isenta da regra.

Em gradientes e imagens, vale o pior caso. Uma legenda sobre uma fotografia tem uma taxa diferente em cada pixel. Compare o texto com o ponto mais claro do fundo, não com a média, ou coloque uma camada semitransparente atrás do texto para que o fundo seja previsível.

Reprovar por pouco continua sendo reprovar. 4,4:1 é reprovado. Baixar a luminosidade alguns pontos percentuais em HSL costuma bastar — o conversor de cores facilita esse ajuste, já que manter matiz e saturação e reduzir só a luminosidade deixa a cor perfeitamente reconhecível.

Onde isso se encaixa

Contraste é um critério entre muitos, mas é o que afeta o maior número de pessoas: baixa visão é comum, assim como sol forte, telas baratas e o fato de que quase todos nós envelhecemos. Marcação semântica, gerenciamento de foco e alternativas textuais completam o quadro, e o essencial de HTML5 cobre os elementos estruturais dos quais as tecnologias assistivas dependem. Se as suas cores são geradas em tempo de execução — um seletor de tema, uma paleta de gráficos, tags escolhidas pelo usuário —, a verificação deve estar no código, e não só na revisão, e os fundamentos de JavaScript são o ponto de partida para calcular a luminância em tempo real.

Duas limitações desta ferramenta, sem rodeios. Ela implementa a taxa do WCAG 2, não o modelo APCA, mais recente, que está sendo estudado para o WCAG 3 e pontua os mesmos pares de outra forma. E aceita apenas cores hexadecimais opacas — para texto semitransparente, componha primeiro a cor sobre o fundo real dela e verifique o resultado.