Contraste e acessibilidade de cores: WCAG na prática

Uma paleta pode ser elegante no portfólio e um pesadelo na tela de quem tem baixa visão. Acessibilidade de cor não é um detalhe para o fim do projeto: é o que decide se metade das pessoas consegue ler o que você escreveu. E, ao contrário do que parece, projetar com contraste adequado não deixa nada feio — apenas obriga a escolhas mais deliberadas, que quase sempre melhoram o design para todo mundo.

Este guia traduz as regras da WCAG para o dia a dia de quem cria interfaces e materiais de marca, sem tecnicismo. A ideia é sair daqui sabendo medir contraste, entender os níveis exigidos e evitar as armadilhas mais comuns que quebram a leitura sem que ninguém perceba durante o projeto.

Por que contraste importa tanto#

Cerca de uma em cada doze pessoas tem alguma deficiência de visão de cores, e milhões têm baixa visão por idade ou condição. Some a isso o uso ao sol, em telas baratas e em situações de cansaço, e você percebe que contraste ruim não afeta só um grupo específico — afeta quase todo mundo em algum momento. Acessibilidade de cor, nesse sentido, é usabilidade para a maioria disfarçada de exigência para a minoria.

Há também o lado prático e legal: contraste é um dos critérios mais objetivos e mais cobrados em auditorias de acessibilidade, porque é medível com um número. Um texto que falha no contraste é uma falha fácil de apontar e difícil de justificar, o que faz dele um dos primeiros itens a resolver em qualquer projeto sério.

O que é razão de contraste#

A razão de contraste é um número que compara a luminosidade do texto com a do fundo. Vai de 1:1 (texto invisível, mesma cor do fundo) a 21:1 (preto sólido sobre branco puro). Quanto maior o número, mais fácil de ler. O cálculo considera a luminosidade percebida de cada cor, não apenas a diferença de tom — por isso dois tons que parecem distintos ao olho de quem enxerga bem podem, ainda assim, ter contraste insuficiente para quem não enxerga.

Os níveis WCAG na prática#

As Web Content Accessibility Guidelines definem dois níveis principais de contraste para texto. O nível AA exige razão mínima de 4,5:1 para texto normal e 3:1 para texto grande. O nível AAA, mais rigoroso, exige 7:1 para texto normal e 4,5:1 para texto grande. Há ainda um critério para elementos de interface e gráficos, que pede pelo menos 3:1 entre a cor do componente e o que está ao redor.

Na prática, mire em AA como piso inegociável e busque AAA em conteúdo crítico, como textos longos e formulários. AA não é meta ambiciosa; é o mínimo aceitável. Tratar AA como teto, e não como piso, é o erro mais comum — o alvo deveria ser superar esse mínimo sempre que possível, especialmente em conteúdo que as pessoas leem por muito tempo.

Como medir#

Qualquer verificador de contraste resolve: você informa a cor do texto e a do fundo e recebe a razão e se passa em AA ou AAA. Ferramentas de design já trazem isso embutido, e há extensões de navegador que testam páginas ao vivo. O importante é medir cedo e medir sempre, e não deixar para descobrir na auditoria final que metade dos textos falha. Incorporar o teste no momento de escolher a cor economiza refação depois.

Daltonismo: projete sem depender só de cor#

A forma mais comum de daltonismo afeta a distinção entre vermelho e verde. Isso quebra padrões clássicos de interface, como "verde igual a certo, vermelho igual a errado", porque para muita gente os dois parecem a mesma cor. Gráficos que diferenciam séries apenas por cor, mapas de status e botões que dependem só do tom para comunicar significado tornam-se ilegíveis para uma parcela relevante do público.

A regra de ouro é simples: a cor nunca deve ser o único portador de significado. Reforce sempre com outro sinal — um ícone, um rótulo de texto, um padrão, uma posição. Um alerta vermelho ganha um ícone de atenção; um item aprovado ganha a palavra "aprovado" além da cor verde; séries de um gráfico ganham formas ou rótulos diretos. Assim a informação sobrevive mesmo quando a cor não é percebida.

Armadilhas comuns de contraste#

Alguns padrões da moda são bonitos e inacessíveis. Texto cinza-claro sobre fundo branco, muito usado por parecer "delicado", costuma falhar em AA. Texto sobre gradientes, onde o contraste varia ao longo do fundo e passa em uma ponta mas falha na outra. Placeholders de formulário tão apagados que se confundem com campo vazio. E botões com pouca diferença entre a cor do texto e a do fundo do próprio botão, que somem sob luz forte.

Texto sobre imagem#

Banners com texto sobre foto são uma fonte clássica de falha, porque a imagem muda de claro para escuro e nenhum tom de texto funciona em todas as áreas. A solução é aplicar um overlay semitransparente ou um degradê atrás do texto, garantindo um fundo previsível sob as letras. Outra opção é reservar uma faixa sólida para o texto. O que não funciona é confiar na sorte de que a parte da foto onde o texto cai será sempre escura o bastante.

Como embutir acessibilidade no fluxo#

Acessibilidade de cor não deveria ser uma etapa de correção no fim, e sim uma restrição de projeto desde o começo. Isso significa definir uma paleta em que as combinações de uso já passam nos níveis exigidos, documentar quais cores podem ficar sobre quais fundos e testar os componentes principais antes de replicá-los pelo produto inteiro. Quando o sistema de design nasce acessível, cada nova tela herda a conformidade sem esforço extra.

Vale também rodar uma verificação automática no processo, como parte da revisão, para pegar regressões antes que cheguem ao ar. Ferramentas automáticas não capturam tudo — julgamento humano ainda é necessário para casos como texto sobre imagem —, mas eliminam a maioria das falhas óbvias de contraste de forma barata e repetível.

Contraste não é só sobre texto#

É fácil pensar em contraste apenas para blocos de texto, mas as regras da WCAG também alcançam os elementos de interface. A borda de um campo de formulário, o ícone que indica um status, a linha que separa seções, o próprio contorno de um botão — tudo isso precisa se destacar o suficiente do fundo para ser percebido. O critério para esses elementos gráficos e de interface é de pelo menos 3:1, e falhá-lo torna a interface confusa mesmo para quem enxerga bem.

Estados de foco são um caso especialmente negligenciado. Quando alguém navega pelo teclado, precisa ver com clareza qual elemento está selecionado no momento. Um indicador de foco de baixo contraste, ou removido para parecer mais limpo, deixa a pessoa perdida na página. Garantir que o foco seja visível e contrastante é parte inseparável de projetar cores acessíveis, não um detalhe opcional de acabamento.

Acessibilidade como qualidade, não obrigação#

Há uma mudança de mentalidade que facilita todo o trabalho: parar de ver acessibilidade de cor como uma exigência chata imposta de fora e passar a enxergá-la como um indicador de qualidade do design. Um sistema visual que respeita contraste funciona melhor em telas ruins, sob sol forte, para olhos cansados e para pessoas de todas as idades. Ou seja, projetar para quem tem baixa visão melhora a experiência de praticamente todo mundo.

Essa perspectiva também muda quando a acessibilidade entra no processo. Tratada como correção de última hora, ela vira retrabalho caro e frustrante. Tratada como restrição desde o início — uma paleta que já nasce com combinações aprovadas, componentes testados antes de replicados —, ela deixa de custar tempo extra e passa a ser simplesmente como as coisas são feitas. O melhor design acessível é aquele que ninguém percebe, porque funciona para todos sem chamar atenção para si.

Perguntas frequentes#

Contraste alto deixa o design feio? Não precisa. Contraste adequado é uma restrição, e boas restrições costumam gerar design mais claro e hierárquico. Muitos visuais premiados têm contraste alto justamente porque priorizam legibilidade.

Dark mode facilita ou atrapalha o contraste? Depende de como é feito. Texto branco puro sobre preto puro pode causar cansaço visual; o recomendável é usar tons levemente suavizados que ainda passem em AA. O dark mode precisa ser testado com o mesmo rigor que o modo claro.

Preciso testar todas as combinações da paleta? Você precisa testar as combinações que realmente usa — texto sobre fundo, botão sobre página, links sobre corpo de texto. Documentar essas duplas aprovadas evita que alguém combine duas cores que, juntas, não passam.

Conclusão acionável#

Acessibilidade de cor se resume a dois compromissos: garantir contraste mínimo AA em todo texto e nunca usar a cor como único portador de significado. Comece medindo as combinações que você mais usa, corrija as que falham e adote um segundo sinal — ícone ou rótulo — sempre que a cor comunicar algo importante. São duas regras simples que, aplicadas com consistência, tornam seu trabalho legível para praticamente todo mundo, sem tirar nada da elegância.