How to Check Colour Contrast for Accessibility (WCAG Explained)

Se o texto não se destaca o suficiente do fundo, pessoas com baixa visão, daltonismo, ou simplesmente com o celular sob sol forte não conseguem lê-lo. O contraste é um dos problemas de acessibilidade mais fáceis de medir e corrigir.

O que significa “taxa de contraste”

O contraste é expresso como uma razão entre a luminosidade de duas cores, de 1:1 (idênticas, invisível) até 21:1 (preto puro sobre branco puro). Ele é calculado a partir da luminância relativa de cada cor, que dá mais peso ao verde do que ao vermelho ou azul porque é assim que a visão humana funciona. Você não precisa fazer a conta — um verificador faz isso — mas é por isso que duas cores que parecem diferentes ainda podem falhar.

Os limites do WCAG

• AA, texto normal: 4,5:1 — o mínimo comum, e o que a maioria das organizações precisa atingir.
• AA, texto grande: 3:1 — “grande” significa cerca de 24px, ou 19px em negrito, para cima.
• AAA, texto normal: 7:1 — uma meta mais rigorosa para conteúdo que precisa ser legível pelo máximo de pessoas possível.

Esses limites se aplicam a texto e a elementos de interface com significado, como ícones e bordas de formulário. Elementos gráficos puramente decorativos são isentos.

Como verificar um par de cores

Pegue a cor do texto e a cor diretamente atrás dele (não o fundo da página, se houver um cartão ou sobreposição no meio) e coloque as duas num verificador de contraste. Ele vai dar a razão e dizer quais níveis passam. Verifique os estados que as pessoas realmente veem: hover, links visitados, texto de placeholder, botões desativados, e texto sobre imagens.

Corrigindo um par que falha

• Escureça o texto ou clareie o fundo — geralmente basta ajustar um pouco a luminosidade, mantendo o tom, para que a marca continue com a cara certa.
• Adicione um fundo sólido atrás de texto que fica sobre uma foto ou gradiente.
• Aumente o peso ou o tamanho — texto grande tem um limite menor, então deixar um subtítulo em negrito pode fazer com que ele passe a atender ao critério.
• Nunca dependa só da cor para transmitir significado (por exemplo, vermelho/verde para erro/sucesso) — adicione um ícone ou rótulo para quem não consegue diferenciá-las.

Verifique a sua agora

Cole qualquer cor em HEX, RGB ou HSL no nosso Conversor de Cores e ele mostra a taxa de contraste contra texto branco e preto com um selo AA/AAA, além de uma paleta combinando caso você precise de uma cor de destaque acessível. Ele roda inteiramente no seu navegador.