As cores de status do Bootstrap e do Tailwind falham para pessoas daltônicas

Quase todo design system traz um vermelho para erros e um verde para sucesso. É uma convenção tão estabelecida que ninguém a audita. Medimos o que acontece com esses padrões sob deficiência de visão de cores simulada, e os números são piores do que a convenção leva a crer.

O que medimos

Pegamos as cores de status padrão de dois sistemas muito usados e calculamos a distância perceptual CIEDE2000 entre cada par de vermelho e verde, primeiro para a visão típica e depois para cada deficiência simulada, usando o modelo de Machado et al. (2009).

Em linhas gerais, uma distância abaixo de uns 10 significa que duas cores são difíceis de distinguir lado a lado. Abaixo de 5, elas são lidas como a mesma cor.

Par	Típica	Deuteranopia	Protanopia	Acromatopsia
Bootstrap danger / success	74.1	4.0	25.4	10.0
Tailwind red-500 / green-500	76.1	7.8	25.9	12.9
Vermelho / verde genéricos	70.6	6.0	23.0	10.1
Azul / laranja	62.4	74.2	66.1	28.7

A coluna da deuteranopia é a que mais importa, porque a deuteranomalia, sua forma mais leve, afeta cerca de 5% dos homens. Para esses usuários, os estados de erro e de sucesso do Bootstrap estão separados por uma distância perceptual de quatro. Isso não é uma perda sutil. É a mesma cor.

A última linha é o controle. Azul contra laranja não apenas sobrevive; com deuteranopia, as duas cores ficam mais separadas do que na visão típica.

Por que nenhuma auditoria de contraste pega isso

Esta é a parte que vale a pena absorver, porque explica como o problema sobrevive em sistemas que, no resto, foram construídos com cuidado.

Um verificador de contraste faz uma única pergunta: este primeiro plano se distingue deste fundo? O #dc3545 do Bootstrap sobre branco dá 4.53:1. O #28a745 sobre branco dá 3.01:1. Os dois estão na faixa do aceitável, e os dois são aprovados.

Só que o verificador nunca compara o vermelho com o verde, porque eles nunca ficam um sobre o outro. Aparecem em lugares diferentes, um no aviso de erro e outro no aviso de sucesso, e a ferramenta não tem nenhuma noção de relação entre os dois.

As falhas de daltonismo moram exatamente nesse ponto cego. São falhas entre pares de cores de primeiro plano, e o conjunto de ferramentas padrão só testa primeiro plano contra fundo.

A protanopia é diferente, e isso importa

Repare que a protanopia se sai muito melhor na tabela: por volta de 25, em vez de 4. Não é porque pessoas com protanopia achem essas cores fáceis.

A protanopia envolve uma sensibilidade menor à luz vermelha como um todo, então os vermelhos parecem mais escuros, além de mudarem de matiz. É essa diferença de luminosidade que faz a distância subir de novo: as duas cores passam a ser distinguíveis, mas pelo brilho, e não pelo matiz.

O que dá uma boa pista sobre a solução.

O que funciona de verdade

Separe pela luminosidade. A percepção de luminosidade não é afetada por nenhuma deficiência vermelho-verde. Se as suas cores de erro e de sucesso diferem por um degrau claro de luminosidade, além do matiz, elas continuam distinguíveis, não importa o que os cones estejam fazendo. Essa mudança sozinha resolve a maioria das paletas.

Use o eixo azul-laranja para codificações de dois valores. Gráficos, toggles, comparações de antes e depois. Azul contra laranja é a combinação de duas cores mais robusta que existe, e a medição acima mostra por quê.

Pare de deixar a cor carregar o significado sozinha. É esta solução que de fato atende ao WCAG, e é a que não depende de acertar a matemática. O Critério de Sucesso 1.4.1 exige que a cor nunca seja o único meio de transmitir uma informação. Na prática:

• Um ícone no alerta, não só uma borda colorida
• Rótulos diretos nas séries do gráfico, não só uma legenda de cores
• Linhas contínuas versus tracejadas
• A palavra “Erro” na mensagem de erro

Quando existe uma segunda pista, a paleta deixa de carregar o significado sozinha, e uma confusão entre cores passa a ser estética, e não funcional.

Uma observação sobre os padrões dos frameworks

Nada disso quer dizer que o Bootstrap ou o Tailwind sejam mal construídos. Os dois dão a você as ferramentas para sobrescrever esses valores, e os dois documentam o requisito de acessibilidade.

Mas são os padrões que vão para produção. Um padrão invisível para 5% dos homens merece ser trocado na sua própria camada de tema, em vez de herdado. Custa uma linha num arquivo de configuração, e a alternativa é uma classe de bug que nenhuma auditoria automatizada do seu pipeline vai revelar.

Verifique a sua própria paleta

As medições deste post vieram do nosso simulador de daltonismo, que testa cada par de uma paleta contra oito tipos de visão simulados e aponta os que se confundem. Ele roda inteiramente no seu navegador: cole as cores da sua marca e veja quais pares a sua auditoria de contraste vinha aprovando sem alarde.