Essa tal de internet é para todos mesmo? 6 testes que provam o contrário (parte 1/3)

O dia da "VI ADA"? Quando o baixo contraste mata a sua mensagem

Eu estava no trânsito quando dei de cara com essa traseira de ônibus.
A campanha era para ser motivacional: "DIA DA VIRADA".
Mas, graças a uma escolha infeliz de cores, o que eu (e muita gente na rua) lia era: "DIA DA VI ADA".

Por quê? Porque alguém decidiu colocar um "R" vermelho escuro sobre um fundo roxo escuro. O contraste foi para o espaço, e a letra desapareceu.

Se isso acontece em um outdoor ambulante de 2 metros de altura, imagine o que acontece no seu site, numa tela de celular, com o sol batendo no vidro?

Dou as boas-vindas à Parte 1 da nossa série sobre os erros mais comuns de acessibilidade. Hoje, vamos falar sobre o que (não) vemos.

O Cenário Brasileiro
Segundo pesquisa recente do Movimento Web Para Todos (MWPT), apenas 2,9% dos sites brasileiros foram aprovados em todos os testes de acessibilidade. Isso significa que a imensa maioria da web no Brasil apresenta barreiras de navegação.

Vamos eliminar duas dessas barreiras agora?

---

Erro 1: O Contraste Invisível (e como a IA pode te salvar)

O baixo contraste é um dos erros mais comuns. Muitas pessoas no design amam aquele cinza claro minimalista no fundo branco. É bonito? Talvez. É legível? Não.

Mas o problema vai além do "bonito ou feio". É sobre quem consegue usar o seu produto.

A Solução Profissional: Who Can Use
Esqueça o "olhômetro". Para resolver isso de vez, indico a ferramenta whocanuse.com. Ela leva a verificação de contraste para outro nível:

1. Simulação de Visão: Ela não apenas dá a nota (Pass/Fail). Ela simula visualmente como seu texto é percebido por pessoas com diferentes tipos de daltonismo, catarata, glaucoma e baixa visão.
2. Cenários Reais: Lembra da minha foto do ônibus? O site mostra como o seu contraste se comporta sob luz solar direta. Muitas vezes a cor passa no escritório fechado, mas some na rua.

Dica Extra: A IA tá aí pra te ajudar!
"Beto, testei no site e reprovou. Mas eu não sei qual cor usar agora!"
Não gostou do resultado? Use a Inteligência Artificial a seu favor. Eu uso o Gemini para me sugerir cores que se encaixam nos requisitos da WCAG com um prompt simples:

"Gemini, ajuste as cores para que o contraste mínimo exigido pela WCAG nível AA seja cumprido. Cor de fundo: #FFFFFF (branco), Cor do texto atual: #CCCCCC (cinza). Me dê opções de cinza mais escuro que passem no teste."

A resposta:

Opção 1 (O mínimo necessário): #767676
Este é o cinza mais claro possível que ainda atinge exatamente a marca de 4.5:1. É ideal se você ainda quer manter aquele visual "clean", mas com o mínimo de responsabilidade.

Opção 2 (Segurança total - Nível AAA): #595959
Este tom atinge a proporção de 7.0:1. Ele é recomendado se você quiser passar no teste mais rigoroso da WCAG (o nível AAA), garantindo uma leitura confortável até para quem tem baixa visão.

Opção 3 (Elegância e Contraste): #404040
Este é um cinza "chumbo" bem profissional. Ele traz uma densidade maior para a leitura e passa com folga em todos os critérios.

---

Erro 2: Imagens e Gráficos que não dizem nada

Aí você me diz: "Ah Beto, perfeito! Ajustei o CSS. Mas e se o texto estiver dentro da foto, igual ao ônibus? Eu não consigo mudar a tinta do ônibus na vida real."

Se eu não tivesse descrito a foto do ônibus no começo deste post, ninguém conseguiria entender o que está acontecendo. Muitos sites deixam a descrição da imagem vazia ou colocam nomes inúteis como "foto_onibus_final.jpg". Isso é excluir uma parcela enorme do seu público.

Solução: Pegue dois coelhos de uma vez só (<figure> e <figcaption>)

Se a imagem é complexa ou difícil de ler, não esconda a descrição. Use a tag HTML semântica <figure> para envolver a imagem e a tag <figcaption> logo abaixo para a legenda.

⚠️ ATENÇÃO: Muita gente acha que, se já colocou uma legenda (figcaption), pode deixar o atributo alt da imagem vazio. Não faça isso.

Se você deixa o alt="", o leitor de tela ignora que existe uma imagem ali e pula direto para o texto da legenda. Quem usa leitor de telas ouve a explicação, mas não entende que aquela informação veio de um gráfico ou foto.

A regra de ouro: No alt, diga de forma sucinta o que é a imagem (ex: "Gráfico de vendas 2025"). No figcaption, coloque a conclusão ou o detalhamento (ex: "O gráfico mostra um aumento de 20% no último trimestre"). Assim, a informação fica completa e sem repetição.

Exemplo 2: Gráficos precisam contar a história
Imagine um gráfico de barras complexo.

• ❌ Ruim: alt="Gráfico de vendas" (Não diz nada).
• ✅ Bom: alt="Gráfico de barras mostrando aumento de 20% nas vendas em 2025 comparado a 2024"

Dica PRO para Devs/Ux:
Se o gráfico for muito complexo para um alt text, forneça os dados!
Você pode colocar um link para baixar a planilha ou, melhor ainda, criar uma tabela HTML com os dados do gráfico e usar a classe .sr-only (screen reader only) ou visually-hidden.
Assim, o gráfico fica visual na tela, mas para o leitor de tela, ele se transforma numa tabela de dados perfeitamente navegável, assim toda a informação fica acessível a quem precisar.

---

Que tal testar seu site favorito quanto ao contraste agora?
Pegue a cor principal dele e jogue no Who Can Use. Veja se ela resiste ao teste da "Luz Solar Direta". Se não passar, peça ajuda para a IA e ajuste o contraste!

Na Parte 2, vamos falar sobre navegação e por que o link "Ler mais" é um grande vilão da acessibilidade.