stamatios
← Voltar ao feed
Duas amostras de tinta encaixadas como quebra-cabeça sob régua de contraste, cores acessíveis dependem sempre do par combinado
Produto & Design

Cores acessíveis sozinhas não existem, contraste é sempre entre duas

resumo de ~3 min

A tese: acessibilidade não é atributo de uma cor isolada

Erik Kroes, consultor de acessibilidade, argumenta que é um erro falar em "cores acessíveis" como propriedade individual de uma cor. No trabalho dele, cores costumam se destacar quando causam problemas de acessibilidade, mas a constatação central é simples: contraste só existe entre duas cores, nunca em uma só.

O que a WCAG realmente exige

Quando se fala em acessibilidade, geralmente se fala em conformidade com a WCAG, e quando se fala em cor na WCAG, o assunto costuma ser contraste. As regras citadas são:

  • Texto comum precisa de contraste mínimo de 4,5∶1 com o entorno.
  • Texto grande (24px ou mais), texto de 19px em negrito e componentes de interface têm exigência reduzida para no mínimo 3∶1.

Kroes observa que existem muitas ferramentas para testar contraste - extensões do Figma, ferramentas de navegador, VS Code, sites especializados - e que encontrar a proporção não deveria ser um problema.

O exemplo do amarelo do McDonald's

Para ilustrar, ele usa o logo do McDonald's: o amarelo da marca tem contraste de cerca de 1,5∶1 sobre fundo branco - e pior ainda sobre fundo off-white. Isso torna a cor inacessível? Não, segundo o autor: ela pode funcionar muito bem sobre um fundo escuro. O exemplo reforça que a acessibilidade do contraste não é característica de uma cor isolada; é preciso um par de cores para haver contraste.

A solução: paletas com combinações validadas

Em vez de buscar cores acessíveis, o autor propõe montar combinações de cores da marca que atendam aos critérios. Se o objetivo é usar a cor da marca sobre fundo branco, ou texto branco sobre ela, a combinação deve alcançar ao menos 3∶1; para texto comum com branco, é preciso 4,5∶1 - ou a combinação deve ser evitada.

Ele oferece diretrizes práticas:

  • Entregar aos designers apenas combinações com contraste suficiente.
  • Combinações abaixo de 3∶1 devem ter uso muito limitado.
  • Combinações entre 3∶1 e 4,5∶1 servem apenas para texto grande e componentes de interface.
  • Quando a combinação está muito próxima do limite, vale ajustar uma ou ambas as cores: uma cor da marca em 2,9∶1 que passe a 3,8∶1 passa a funcionar com branco e também com outras cores claras.

Conclusão: a paleta como ponto de alavancagem

A conclusão de Kroes é que o papel do time de design é oferecer os recursos certos para facilitar experiências acessíveis - no caso, uma paleta com combinações de cores contrastantes, que permite aos designers fazer o correto. Uma paleta impraticável vira um gargalo e espalha problemas de contraste por todo o produto; uma paleta prática pode ter um impacto prático enorme.

Ele ressalva, no entanto, que há mais na relação entre cor e acessibilidade do que apenas contraste.