O daltonismo, ou discromatopsia, é uma "anomalia da visão de cores que afeta a capacidade de distinguir certas tonalidades, mais comumente o vermelho e o verde" (fonte: INSERM, Instituto Nacional de Saúde e Pesquisa Médica da França). Essa condição afeta aproximadamente 8% dos homens e 0,5% das mulheres em populações de origem europeia, ou seja, cerca de 300 milhões de pessoas no mundo.
Mas reduzir o problema do contraste ao daltonismo seria um erro. Um contraste insuficiente afeta todo mundo: as pessoas que consultam o celular sob o sol, os usuários cansados no final do dia, os idosos cuja acuidade visual diminui, e até os desenvolvedores que testam seu site em uma tela perfeitamente calibrada sem perceber que 90% dos seus usuários não têm a mesma tela.
O contraste não é um problema funcional. Seu botão funciona, seu link é clicável, seu formulário envia os dados. Mas se ninguém consegue ler o texto ou distinguir o botão do fundo, a funcionalidade não serve para nada. É um problema visual, e se resolve com ferramentas visuais.
Sumário
- O que o daltonismo realmente muda na percepção de um site
- O contraste segundo as WCAG: os números que você precisa conhecer
- Por que as ferramentas clássicas não são suficientes
- O teste visual com simulação de daltonismo
- Como integrar a verificação do contraste no seu workflow
- FAQ
O que o daltonismo realmente muda na percepção de um site
O daltonismo não é uma ausência total de visão de cores na maioria dos casos. Existem vários tipos, cada um afetando a percepção de maneira diferente.
A deuteranomalia é a forma mais comum. Afeta aproximadamente 6% dos homens e reduz a sensibilidade ao verde. Os verdes e os vermelhos se confundem, os laranjas e os amarelos se tornam difíceis de distinguir. É o tipo que a maioria dos designers conhece vagamente, sem sempre medir as consequências reais.
A protanomalia (aproximadamente 1% dos homens) reduz a sensibilidade ao vermelho. Os vermelhos aparecem mais escuros e se confundem com os marrons e os verdes escuros. Uma mensagem de erro em vermelho sobre fundo escuro pode literalmente desaparecer para esses usuários.
A tritanomalia (menos de 0,01% da população) afeta a percepção do azul e do amarelo. É rara, mas existe.
A acromatopsia (visão em tons de cinza) é extremamente rara, mas representa o caso extremo onde apenas o contraste de luminosidade importa.
Para um site web, as consequências são concretas e numerosas.
Um indicador de status que utiliza apenas vermelho e verde (sucesso/erro) é inutilizável para um deuteranope. Um link colorido sem sublinhado pode ser invisível se sua cor se confunde com o texto ao redor. Um botão de ação cuja cor de fundo tem contraste suficiente para uma visão normal pode se tornar ilegível sob deuteranomalia.
E esses problemas não são casos marginais. Com 8% dos homens afetados, em uma equipe de 25 desenvolvedores, há estatisticamente 1 a 2 pessoas daltônicas. Na sua base de usuários de 100.000 pessoas, aproximadamente 4.000 homens percebem seu site de maneira diferente do que você projetou.
O contraste segundo as WCAG: os números que você precisa conhecer
As WCAG definem ratios de contraste mínimos entre o texto e seu fundo. Esses ratios são calculados a partir da luminância relativa das duas cores, em uma escala de 1:1 (sem contraste) a 21:1 (contraste máximo, preto sobre branco).
Para o nível AA, o mais comumente exigido pelas regulamentações:
O texto normal (menos de 18 pontos ou menos de 14 pontos em negrito) deve ter um ratio de contraste de pelo menos 4.5:1. O texto de grande tamanho (18 pontos ou mais, ou 14 pontos em negrito ou mais) necessita de um ratio de pelo menos 3:1. Os elementos de interface não textuais (ícones, bordas de campos, indicadores de estado) também devem respeitar um ratio de 3:1 (critério 1.4.11).
Para o nível AAA, as exigências são mais rigorosas: 7:1 para o texto normal e 4.5:1 para o texto de grande tamanho.
Esses números não são arbitrários. Eles derivam de pesquisas sobre a percepção visual e levam em conta a perda de sensibilidade ao contraste relacionada à idade. Uma pessoa de 80 anos precisa de aproximadamente três vezes mais contraste que uma pessoa de 20 anos para ler o mesmo texto nas mesmas condições.
O problema é que esses ratios são calculados para uma visão de cores normal. Um contraste de 4.5:1 entre um texto vermelho escuro e um fundo verde escuro satisfaz tecnicamente o critério WCAG, mas pode ser insuficiente para um deuteranope que não distingue essas duas cores. As WCAG reconhecem isso no critério 1.4.1 (uso da cor): a informação não deve depender unicamente da cor.
Por isso, verificar o ratio de contraste não é suficiente. Também é preciso verificar o contraste tal como é percebido pelos diferentes tipos de daltonismo.
Por que as ferramentas clássicas não são suficientes
As ferramentas de análise de contraste mais utilizadas (o verificador de contraste integrado no Chrome DevTools, extensões como WAVE ou axe DevTools, as auditorias Lighthouse) são excelentes no que fazem: calcular o ratio de contraste entre duas cores específicas.
Mas apresentam várias limitações.
Elas verificam o contraste declarado, não o contraste renderizado. Se uma imagem de fundo, um gradiente ou um efeito de transparência reduz o contraste efetivo, essas ferramentas podem não detectar. Um texto branco sobre um fundo gradiente de azul claro a azul escuro pode ter contraste suficiente no topo da zona, mas insuficiente na parte inferior. A ferramenta mede um único par de cores, não a realidade do renderizado.
Elas não simulam o daltonismo em um contexto de teste automatizado. O Chrome DevTools permite simular o daltonismo manualmente, mas essa verificação não é automatizável em um pipeline CI/CD. Você pode simular a deuteranomalia para uma página de cada vez, mas não para 200 páginas a cada deploy.
Elas não detectam regressões. Uma auditoria Lighthouse te dá uma pontuação em um momento específico. Ela não te alerta quando um desenvolvedor modifica uma cor de fundo que degrada o contraste. Você só descobre na próxima auditoria, se alguém lembrar de executá-la.
Elas analisam os elementos individualmente, não o renderizado global. O contraste de um elemento depende do seu contexto visual. Um texto cinza médio pode ser perfeitamente legível sobre um fundo branco, mas se tornar ilegível se um painel colorido for colocado atrás dele após uma modificação do layout. As ferramentas de análise DOM não capturam essas interações visuais.
O teste visual com simulação de daltonismo
O teste visual automatizado traz uma abordagem fundamentalmente diferente. Em vez de analisar o código CSS, ele captura o renderizado real da página tal como aparece no navegador, e então compara esse renderizado com uma referência para detectar qualquer mudança.
Aplicado ao contraste e ao daltonismo, esse mecanismo oferece possibilidades poderosas.
Captura do renderizado real. O teste visual tira um screenshot do que o navegador realmente exibe. Os gradientes, as imagens de fundo, as transparências, as sombras: tudo é levado em conta. O contraste medido é o contraste real, não o contraste teórico calculado a partir do CSS.
Simulação de daltonismo integrada. Aplicando filtros de simulação de daltonismo (matrizes de transformação colorimétrica para deuteranopia, protanopia e tritanopia) aos screenshots capturados, o teste visual pode verificar que o contraste permanece suficiente para cada tipo de visão de cores. O que era um teste manual pontual se torna um teste automatizado sistemático.
Detecção de regressões. Se um desenvolvedor modifica uma cor, um fundo ou um gradiente, o teste visual detecta a diferença. Se essa diferença é significativa (ultrapassando o limiar de tolerância configurado), o teste falha e bloqueia o deploy. A regressão de contraste é capturada antes de chegar à produção.
Verificação cross-browser. Os navegadores não renderizam as cores de maneira idêntica. As diferenças de renderização de fontes, antialiasing e gestão de perfis de cor podem afetar o contraste percebido. O teste visual cross-browser captura essas diferenças e garante contraste suficiente em todos os navegadores alvo.
Cobertura exaustiva. Diferentemente de uma auditoria manual que verifica algumas páginas representativas, o teste visual automatizado pode cobrir todo o seu site a cada deploy. Cada página, cada componente, sob cada condição de simulação.
Como integrar a verificação do contraste no seu workflow
A implementação de uma verificação do contraste por teste visual segue uma abordagem estruturada.
Identifique seus componentes críticos. Os formulários, os botões de ação, as mensagens de erro e sucesso, os indicadores de estado, os links de navegação: esses são os elementos onde um problema de contraste tem mais impacto na experiência do usuário. Comece por eles.
Crie baselines em condições normais. Capture suas páginas e componentes no estado de referência. Esses screenshots servem como ponto de comparação para detectar regressões futuras.
Adicione baselines com simulação de daltonismo. Para cada página ou componente crítico, crie baselines adicionais com os filtros de simulação: deuteranopia, protanopia e tritanopia. Isso te dá três conjuntos adicionais de baselines que refletem o que seus usuários daltônicos realmente veem.
Defina limiares de tolerância rigorosos. Para os testes de contraste, a tolerância a diferenças deve ser baixa. Uma mudança de cor de alguns matizes pode fazer um ratio de contraste cair abaixo do limiar WCAG. Um limiar de diferença de 1 a 2% é apropriado para esses testes.
Integre na CI/CD. Configure seus testes para executar automaticamente a cada pull request. Se um teste de contraste falha, a pull request é bloqueada até a correção. É a única maneira de garantir que as regressões de contraste não cheguem à produção.
Eduque sua equipe. O maior obstáculo à acessibilidade de cores não é técnico, é o desconhecimento. Compartilhe os resultados dos testes de simulação de daltonismo com seus designers e desenvolvedores. Mostre-lhes concretamente o que os usuários daltônicos veem. A conscientização muda os comportamentos de forma duradoura.
Uma ferramenta como Delta-QA permite implementar esse monitoramento sem competências técnicas avançadas. Você configura suas páginas, suas condições de teste e seus limiares de tolerância em uma interface visual. As capturas e comparações são automáticas.
Além do daltonismo: o contraste como questão universal
O daltonismo é o caso mais documentado, mas o contraste afeta uma população muito maior.
As condições de iluminação. Segundo um estudo do Google (2018), 70% do tempo gasto no celular é fora de condições de iluminação ideais. O que é legível em um escritório climatizado se torna ilegível sob o sol.
O envelhecimento. Aos 60 anos, a quantidade de luz que chega à retina é reduzida em aproximadamente um terço em relação aos 20 anos. Os idosos são usuários digitais cada vez mais ativos.
A fadiga visual. Após horas diante de uma tela, a capacidade de distinguir contrastes baixos diminui. É um fenômeno documentado que afeta praticamente todos os trabalhadores de escritório.
A qualidade das telas. As telas baratas, os projetores de sala de reunião, os quiosques interativos: o contraste real varia consideravelmente dependendo do hardware.
Projetar para o contraste não é apenas cumprir as WCAG para evitar um processo. É reconhecer que a legibilidade é uma condição prévia a qualquer interação, e que as condições ideais de leitura são a exceção, não a regra.
FAQ
Como saber se meu site tem problemas de contraste para daltônicos?
A forma mais direta é simular os diferentes tipos de daltonismo e verificar visualmente o resultado. O Chrome DevTools oferece essa funcionalidade manualmente (aba Rendering, Emulate vision deficiencies). Para uma verificação sistemática e automatizada, o teste visual com filtros de simulação integrados permite cobrir todo o site a cada deploy.
O ratio de contraste WCAG garante a legibilidade para daltônicos?
Não necessariamente. O ratio de contraste WCAG é baseado na luminância relativa, que é independente do matiz. Um contraste de 4.5:1 entre duas cores com luminância suficientemente diferente é conforme, mas se essas cores se confundem sob deuteranopia, o texto pode continuar difícil de distinguir. O critério 1.4.1 das WCAG exige ainda que a cor não seja o único meio de transmitir uma informação.
Quais tipos de daltonismo devem ser testados primeiro?
A deuteranomalia e a deuteranopia (confusão vermelho-verde relacionada ao canal verde) afetam aproximadamente 6% dos homens e constituem a prioridade. A protanomalia e a protanopia (confusão vermelho-verde relacionada ao canal vermelho) afetam aproximadamente 2% dos homens. A tritanopia (confusão azul-amarelo) é muito rara e representa um teste complementar. Testar no mínimo a deuteranopia cobre a maioria dos casos.
O teste visual pode substituir uma auditoria de contraste manual?
O teste visual detecta as regressões de contraste (uma mudança que degrada o contraste em relação à baseline). Ele não realiza um cálculo de ratio de contraste para cada par texto/fundo. As duas abordagens são complementares: a auditoria manual ou automatizada (via axe-core) identifica as violações iniciais, e o teste visual previne as regressões futuras.
Como evitar problemas de contraste desde a fase de design?
Três regras fundamentais: nunca usar a cor como único indicador (sempre adicionar um texto, um ícone ou um padrão), utilizar paletas de cores testadas para daltonismo (ferramentas como Sim Daltonism ou Color Oracle permitem verificar em tempo real), e sempre verificar o ratio de contraste antes de validar uma escolha de cor. Os design systems modernos integram essas verificações em seus tokens de cor.
Quantas pessoas são realmente afetadas por problemas de contraste?
Além dos 300 milhões de daltônicos no mundo, os problemas de contraste afetam potencialmente todo mundo dependendo das condições de uso. A OMS estima que 2,2 bilhões de pessoas têm uma deficiência visual, incluindo 1 bilhão de casos de presbiopia não corrigida. E qualquer usuário que consulte uma tela em condições de iluminação desfavoráveis é temporariamente afetado por um contraste insuficiente.
Conclusão
O contraste é um problema visual. Não um problema funcional, não um problema estrutural, não um problema de código. É um problema do que as pessoas veem quando olham para o seu site, nas suas condições reais de uso, com sua visão real.
As ferramentas de análise de código detectam as violações de ratio de contraste no CSS. Isso é necessário, mas insuficiente. O teste visual verifica o contraste no renderizado real, com simulação de daltonismo, através de todos os navegadores e todas as resoluções, de maneira automatizada e contínua.
8% dos homens são daltônicos. 100% dos usuários são afetados pelas condições de iluminação, a fadiga visual e a qualidade variável das telas. O contraste não é um tema de nicho. É o fundamento da legibilidade da sua interface.
Experimentar Delta-QA Gratuitamente →