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.
