Baixa visão e cor: o que ajuda a ler

Para quem tem baixa visão, o que mais ajuda é contraste alto entre texto e fundo, texto que possa ser ampliado e liberdade para trocar as cores. Baixa visão é quando a pessoa enxerga, mas com uma dificuldade que óculos comuns não resolvem. O nível varia muito de pessoa para pessoa, e é por isso que o ideal é seguir os mínimos e ir além deles quando der.

As referências deste artigo são as páginas de explicação da WCAG 2.1, as diretrizes de acessibilidade do W3C. Elas dizem para que tipo de visão cada número foi pensado. A WCAG 2.2 (outubro de 2023) é a versão atual e manteve os mesmos valores de contraste.

Para que visão cada número da WCAG foi calculado

O contraste mínimo de 4,5:1 para texto comum (nível AA) foi calculado para compensar a perda de sensibilidade ao contraste de quem tem visão em torno de 20/40. O W3C parte do 3:1 recomendado em um padrão americano e multiplica por 1,5. O nível AAA, de 7:1, segue o mesmo raciocínio para uma visão em torno de 20/80.

O W3C esclarece que ambos os níveis visam pessoas com baixa visão moderada que não usam ferramentas de realce de contraste. Quem tem perdas maiores costuma usar tecnologias assistivas, como ampliadores. Mesmo assim, o seu material precisa funcionar bem quando elas não estão ligadas, e continuar compatível quando estão.

Para a conta em si, veja contraste WCAG: o que é e como medir. Para decidir entre os dois níveis, AA ou AAA: qual contraste buscar.

A visão de cores muda com a idade

O National Eye Institute (NIH) lembra que a visão de cores pode piorar com a idade, muitas vezes por causa de catarata. Ou seja, quem nunca teve dificuldade pode passar a ter, e mais contraste ajuda. Isso vale para o público de uma loja, de um consultório ou de um serviço voltado a pessoas mais velhas, e vale para você daqui a alguns anos.

Cinco ajustes para quem enxerga pouco

1. Contraste acima do mínimo no texto longo

Para cardápio, receita, bula e texto de informação, mire em 7:1. Um azul-noite como #1B2A41 sobre branco dá cerca de 14,44:1. Um cinza mais suave, como #4B5563, dá cerca de 7,56:1 e ainda parece leve. Já #6B7280 dá cerca de 4,83:1 e passa só no AA.

2. Texto de verdade, não texto em imagem

A WCAG aplica a regra de contraste também às imagens de texto, e há um problema extra: quem amplia uma imagem vê o texto borrar. Se o horário de funcionamento está dentro de uma foto, ele não cresce com o zoom do navegador e não é lido por leitores de tela. Escreva a informação em texto.

3. Texto que cresce

O critério 1.4.4 exige que o texto possa ser ampliado em até 200% sem perda de conteúdo ou de funcionalidade, sem precisar de ferramentas extras. Na prática: não bloqueie o zoom, não trave o tamanho de modo que o texto corte ou sobreponha, e teste a página ampliada.

4. Respeitar a escolha de cores do usuário

O critério 1.4.8, de nível AAA, trata de blocos de texto. Ele pede que a pessoa possa escolher as cores de texto e fundo, porque algumas pessoas precisam de combinações incomuns ou de contraste mais baixo para ler com conforto. Pede também linhas de no máximo 80 caracteres, texto alinhado só de um lado (sem justificar nas duas margens, que cria “rios” de espaço branco), espaçamento entre linhas de pelo menos uma vez e meia e espaço entre parágrafos de pelo menos 1,5 vez o espaço entre linhas. Pelo lado do design, isso significa não fixar cores de um jeito que impeça o navegador ou o sistema de aplicar a preferência da pessoa.

5. Fontes e pesos legíveis

A conta do contraste não considera a espessura do traço. Letras finas e claras perdem presença mesmo com a razão aprovada. Prefira peso normal ou médio no texto de leitura e deixe os traços finos para títulos grandes. Detalhes sobre tamanho em contraste em texto grande e texto pequeno.

Exemplo prático: o post de uma artesã

Uma ceramista faz um post de feira com o horário e o endereço, em letra #9CA3AF clara sobre uma foto de cerâmicas. Problemas: o fundo muda a cada pixel, o cinza é fraco e o texto está dentro da imagem.

Como corrigir, passo a passo:

1. Coloque uma faixa sólida atrás do texto. Cor #1B2A41.
2. Use letra branca #FFFFFF sobre a faixa. O contraste é de cerca de 14,44:1.
3. Aumente o tamanho e use peso médio ou negrito.
4. Repita o horário e o endereço na legenda do post, em texto digitado, para quem usa leitor de tela ou amplia a tela.
5. Compare o resultado com o original em escala de cinza e a dois passos de distância do celular.

O W3C lista como falha (F83) usar imagem de fundo que não dê contraste suficiente com o texto sobre ela. A faixa sólida evita o problema.

O que costuma falhar para quem tem baixa visão

Aprovar só pela razão de contraste. O número é um mínimo, não uma garantia de conforto.

Cinza claro em textos de apoio. Legendas, datas e notas são lidas por todo mundo. Costumam falhar primeiro.

Aceitar que “quem precisa, usa o zoom”. O zoom ajuda, mas só se a página aguentar a ampliação. Teste.

Escolher laranjas e amarelos como cor de texto. Cores claras reprovam sobre branco. O amarelo-mostarda #E3B505 dá cerca de 1,93:1 sobre branco. Use-o como fundo, com texto escuro: sobre #1B2A41 ele chega a 7,48:1.

Revisão final antes de publicar a peça

1. Meça o texto de corpo e mire em 7:1 sempre que possível.
2. Garanta 3:1 em ícones e bordas (contraste em botões, ícones e campos).
3. Teste a página ampliada em 200%.
4. Evite texto dentro de imagens.
5. Peça a uma pessoa de verdade para ler sua peça.