WCAG simplificado: como garantir um contraste acessível

Ilustração de óculos de armação preta com lentes em tons de cinza sobre um fundo de listras verticais em cores do arco-íris.

Por Profa Me Rosemeire Cardozo Vidal*

Quando visitamos um site, as cores que aparecem na tela não servem só para deixar tudo bonito e agradável de ver. Elas também ajudam a passar mensagens importantes para quem está acessando.

Imagine que alguém faça login em um site e digita algo errado. O sistema pode mostrar um aviso em vermelho dizendo que há um erro, que ajudará a pessoa a perceber o que precisa ser corrigido.

Mas tem um detalhe: nem todo mundo enxerga as cores da mesma forma. Pessoas com daltonismo ou baixa visão, por exemplo, podem não perceber o aviso vermelho. Por isso, uma das regras do design acessível é utilizar sempre mais de um elemento em informações visuais cruciais, como cores e texto.

A seguir, abordamos com mais detalhes três diretrizes de acessibilidade digital relacionadas ao contraste: 1.4.3 Contraste mínimo, 1.4.6 Contraste melhorado, 1.4.11 Contraste não textual. Este é mais um texto da nossa série “WCAG simplificado”, que trata sobre acessibilidade em sites, tendo como base as recomendações internacionais do WCAG (Web Content Accessibility Guidelines, ou Diretrizes de Acessibilidade para Conteúdo Web, em português).

O que é o critério Contraste do WCAG?

De forma geral, contraste é o brilho que percebemos entre duas ou mais cores e é medido pelo fator que chamamos de luminância. Ou seja, quanto maior essa diferença, mais fácil é enxergar letras e contornos em um site. Por exemplo: letras cinzas claras em um fundo branco são difíceis de enxergar. Mas letras pretas em fundo branco têm um bom contraste e são bem mais fáceis de ler.

O contraste é tratado de duas formas no documento WCAG 2.2: textual e não textual. Vamos entender a diferença entre elas.

Contraste textual

É o contraste entre o texto e o fundo de tela. A diretriz 1.4.3 do WCAG 2.2 determina como requisito de acessibilidade um contraste mínimo de 4,5:1 para texto com tamanho normal. Já para textos com tamanho grande é recomendado o contraste com valor de 3:1.

A diretriz 1.4.6 (contraste melhorado) é mais exigente que a 1.4.3, visando garantir um nível bastante elevado de contraste, o que pode beneficiar um número ainda maior de pessoas. Essa diretriz recomenda a relação de 7:1 para texto e imagens de texto, e de 4,5:1 para texto com tamanho grande e imagens compostas por texto.

Para quem ainda não tem familiaridade com esse tipo de taxa de proporção, se pegarmos o exemplo citado de 4,5:1, significa que a cor do texto precisa ser 4,5 vezes mais luminosa ou escura que a cor de fundo.

Há ferramentas automáticas que ajudam a identificar a proporção do contraste, bastando incluir os códigos hexadecimais de cada cor utilizada (tipo #333333 ou #FFFFFF). Apenas como referência, se você usar preto no texto (#000000) e branco no fundo (#FFFFFF) ou vice-versa, vai ter contraste 21:1, o que atenderia com folga este critério.

Contraste não textual

É o contraste em elementos que não são textos, como ícones, botões e gráficos. Esses também precisam ser visíveis para todas as pessoas. Para esse tipo de contraste temos a diretriz 1.4.11, que determina como requisito uma proporção de pelo menos 3:1 entre as cores que compõem os elementos gráficos e contornos.

Vamos pegar o exemplo de uma pessoa que usa o teclado para navegar ao invés do mouse. Para saber onde está na página, ela conta com recurso de foco visível, que é um marcador que mostra em qual parte da página ela está. Esse marcador precisa ter um bom contraste para ser fácil de enxergar, mesmo em partes do site que normalmente tendem a ter mais cores escuras, como o cabeçalho (parte de cima) ou o rodapé (parte de baixo).

Outro exemplo é a diferença de cor (contraste) entre um botão ativado (quando está funcionando e pode ser clicado) e um botão desativado (quando está apagado ou não pode ser usado no momento).

3 dicas práticas para implementação do contraste acessível

1) Usar as diretrizes recomendadas de contraste:

2) Utilizar ferramentas para avaliação de contraste para texto e plano de fundo, inclusive em links:

3) Utilizar outras formas de transmitir informação além da cor. Por exemplo, sinalizar campos obrigatórios com asterisco, cores e descrição textual.

Por que você deve se importar com esses critérios de acessibilidade?

Vamos imaginar uma situação: uma pessoa entra em um site para comprar um tênis. O produto está disponível em várias cores, mas essa pessoa é daltônica e não consegue diferenciar todas elas. Como ela vai saber com segurança qual cor está escolhendo?

Nesse caso, não podemos usar somente a cor para mostrar a informação. Além de mostrar as opções com imagens coloridas, o site também deve colocar o nome da cor por escrito (como “azul”, “vermelho”, “preto”). Assim, a pessoa consegue identificar a cor mesmo que não possa enxergá-la corretamente.

Esse cuidado também ajuda quem tem cegueira ou com baixa visão que usam leitores de tela para navegar. Quando a informação da cor está em texto, o leitor pode ler em voz alta e a pessoa entender o que está sendo mostrado.

Outro ponto importante é o contraste. Se o texto ou os links estiverem em cores muito parecidas com o fundo, pessoas com baixa visão podem não identificá-los. Por isso, o link precisa ter uma cor que se destaque e também mudar o ponteiro do mouse quando a pessoa passa por cima, indicando claramente que aquilo é clicável.

Essas pequenas mudanças tornam o site mais fácil de ser utilizado por pessoas dos mais variados perfis e habilidades.

*Rosemeire Cardozo Vidal é mestre em engenharia biomédica e professora de acessibilidade web com foco em testes e em WCAG. Ela faz parte da Liga Voluntária do Movimento Web para Todos.