A primeira vez que percebi mesmo o que era o daltonismo não foi a partir de uma especificação — foi a partir de uma revisão de código. Tinha construído um painel de estado em que pontos verdes significavam "saudável" e pontos vermelhos significavam "em baixo", e um engenheiro de backend da equipa comentou, quase a pedir desculpa, que não conseguia perceber quais os servidores que estavam a arder. Ele é um dos cerca de um em cada doze homens com défice de visão das cores vermelho-verde. O meu lindíssimo sistema de semáforos era, para ele, uma grelha de círculos cinzentos-acastanhados idênticos. Nada estava partido no código. Tudo estava partido no design.
É isto que tem de especial criar uma paleta acessível a daltónicos: as falhas são invisíveis para quem as colocou em produção. Não se sente o bug. Por isso, é preciso criar o hábito de desenhar como se a cor fosse informação que poderá perder a qualquer momento — porque, para uma fatia significativa dos seus utilizadores, já é.
Quão comum é, e o que corre mesmo mal
O défice de visão das cores (CVD) afeta cerca de 8% dos homens e 0,5% das mulheres de ascendência do norte da Europa — sensivelmente 1 em cada 12 homens e 1 em cada 200 mulheres. Num produto com uma audiência minimamente real, isto não é um caso marginal. É uma coluna nas suas analíticas.
O défice não é "ver a preto e branco" — a verdadeira monocromacia é raríssima. O que acontece é que um tipo de cone do olho está desviado ou ausente, o que faz colapsar certas cores umas nas outras. Os principais tipos, por ordem de frequência:
- Deuteranomalia e deuteranopia — resposta reduzida ou ausente do cone verde. Este é o grande caso: só a deuteranomalia afeta cerca de 5% dos homens, o que faz dela a forma isolada mais comum. Vermelhos, verdes, castanhos e laranjas misturam-se uns nos outros.
- Protanomalia e protanopia — resposta reduzida ou ausente do cone vermelho, cerca de 1% dos homens para a forma completa. Confusão vermelho-verde semelhante, mas os vermelhos também parecem mais escuros e podem desaparecer contra o preto.
- Tritanopia e tritanomalia — défice azul-amarelo. Genuinamente raro (na ordem dos 0,01% e não ligado ao sexo, pelo que afeta homens e mulheres mais ou menos por igual), mas vale a pena uma olhadela, porque quebra as distinções azul-verde e amarelo-rosa que os outros tipos deixam intactas.
A conclusão prática: cerca de 99% dos casos de CVD são vermelho-verde. Se a sua paleta sobrevive a uma simulação vermelho-verde, cobriu a esmagadora maioria dos utilizadores afetados. É aí que vale a pena concentrar primeiro a atenção.
Isto é um problema diferente do contraste
Aqui está a distinção que faz tropeçar até as equipas mais cuidadosas. O contraste de luminância (o do tipo WCAG) diz respeito a claro versus escuro — se consegue ler o texto. O défice de visão das cores diz respeito à confusão de matizes — se consegue distinguir duas cores quando elas calham ter luminosidade semelhante. São problemas independentes, e pode falhar num enquanto arrasa no outro.
O exemplo clássico: vermelho puro #FF0000 sobre verde puro #008000 tem um contraste de luminância de cerca de 1,3:1, o que falha estrondosamente a WCAG — mas mesmo que "corrigisse" o contraste, um deuteranope continuaria com dificuldades, porque as próprias matizes colapsam uma na outra. Inversamente, duas cores podem ter um contraste lindíssimo e ainda assim ser uma armadilha para CVD se estiver a usar a matiz delas, e só a matiz, para transmitir significado.
Por isso, uma paleta acessível a daltónicos e uma paleta em conformidade com a WCAG são círculos que se sobrepõem, não o mesmo círculo. Precisa dos dois. Se ainda não o fez, vale a pena ler Rácios de Contraste da WCAG Explicados em paralelo com este artigo — o contraste de luminância é a base, e o design seguro para CVD é a camada que assenta por cima.
A regra única que resolve a maior parte: nunca confiar só na cor
Se levar um único princípio deste artigo, leve este: não confie só na cor para transmitir informação. O W3C torna isto um requisito explícito — Critério de Sucesso 1.4.1 da WCAG, Utilização da Cor — e é o hábito de maior alavancagem que pode criar.
A solução é quase sempre a redundância. Sempre que a cor transmite significado, associe-a a um segundo sinal, que não seja cor:
- Texto ou etiquetas. O meu painel de servidores melhorou no instante em que cada ponto passou também a dizer "Em funcionamento" ou "Em baixo". Aborrecido, à prova de bala.
- Ícones e formas. Um visto, um X, um triângulo de aviso. Os estados de erro recebem um ícone diferente, não apenas uma cor diferente. É por isto que um bom formulário mostra um contorno vermelho e um ícone de erro e uma mensagem.
- Padrões e texturas. Nos gráficos, preencha barras ou regiões com tracejados, pontos ou riscas, para que as categorias se distingam mesmo em tons de cinzento.
- Posição e ordem. Uma legenda que segue a mesma ordem de cima para baixo das áreas empilhadas que descreve permite às pessoas fazer a correspondência por posição, não por matiz.
O teste rápido que faço a qualquer ecrã: imagine-o impresso numa impressora laser a preto e branco. Se ainda assim conseguir compreendê-lo, não está a confiar só na cor. Se dois estados se tornarem idênticos, encontrou o seu bug.
Escolher matizes que sobrevivem ao CVD
A redundância trata do significado. Mas continua a querer que as próprias cores se mantenham distinguíveis sempre que possível — sobretudo em visualização de dados, onde não pode pôr uma etiqueta de texto em cada um dos 200 pontos de dados.
Algumas regras práticas vindas do terreno:
- Evite o vermelho-verde como único contraste. A combinação "bom/mau", "antes/depois", "equipa A/equipa B" que recorre por defeito a vermelho e verde é a falha de CVD mais comum de todas. Se precisar de duas cores opostas, azul e laranja é o par mais seguro do planeta — mantém-se distinto em todos os tipos de CVD. Azul e vermelho é uma segunda escolha sólida.
- Apoie-se nas diferenças de luminosidade, não só na matiz. Se duas categorias também diferirem na luminância, quem tem CVD consegue distingui-las mesmo quando as matizes colapsam. Um azul-claro contra um azul-escuro lê-se como duas coisas para toda a gente.
- Cuidado com as matizes intermédias. Verde-azulado, azeitona, castanho e laranjas turvos ficam mesmo na zona de perigo do défice vermelho-verde. Matizes puras e separadas saem-se melhor do que as enlameadas.
Em vez de reinventar tudo isto, apoie-se nos ombros de quem o resolveu com rigor. A paleta Okabe-Ito (também chamada paleta Wong, em referência ao artigo de Bang Wong de 2011 na Nature Methods) é um conjunto de oito cores concebido para se manter distinguível em todos os tipos comuns de CVD. Os códigos hexadecimais vale a pena guardar nos favoritos: laranja #E69F00, azul-céu #56B4E9, verde-azulado #009E73, amarelo #F0E442, azul #0072B2, vermelhão #D55E00, roxo-avermelhado #CC79A7 e preto #000000. Usei-a como paleta categórica em mais painéis do que consigo contar, e nunca falhou uma simulação.
Quando está a construir uma paleta de marca ou de interface, em vez de um gráfico, normalmente não precisa de oito cores distintas para CVD — precisa de um par de acentos que não se confundam. É aí que o gerador de paletas de cores ganha o seu lugar: construa a sua harmonia (um esquema complementar dividido ou triádico), leia os valores HSL e depois afaste deliberadamente as suas duas cores semanticamente mais importantes também na luminosidade, e não só na matiz. A leitura em HSL facilita isso — baixe a luminosidade de uma, suba a da outra, e comprou separação que sobrevive ao CVD. Se quiser perceber porque é que certas relações na roda colidem mais do que outras, Paletas Complementares Divididas vs Triádicas entra na geometria.
Teste-a — não confie nos seus próprios olhos
Não pode avaliar isto a olho, porque (estatisticamente) é provável que tenha visão das cores normal e o objetivo é precisamente que a falha seja invisível para si. Simule.
- Coblis (o Color Blindness Simulator no Colblindor) permite carregar uma captura de ecrã e vê-la através de oito tipos diferentes de défice. Tudo corre localmente no seu navegador, por isso pode passar-lhe exportações em resolução total. É o meu recurso preferido para verificar um ecrã acabado.
- DevTools do navegador. O painel Rendering do Chrome tem um menu "Emulate vision deficiencies" — protanopia, deuteranopia, tritanopia e visão desfocada — aplicado em tempo real à página real. Brilhante para apanhar problemas enquanto ainda está na marcação.
- Plugins do Figma e do Sketch como o Stark ou os simuladores de visão integrados permitem verificar os designs antes mesmo de serem construídos.
O meu fluxo de trabalho na prática: desenhar normalmente e depois passar os ecrãs-chave — painéis, gráficos, erros de formulário, qualquer coisa onde a cor signifique algo — primeiro pela deuteranopia (a mais comum), depois pela protanopia e por fim uma passagem rápida pela tritanopia. Noventa por cento dos problemas que encontro estão nessa primeira vista de deuteranopia. Corrija esses e terá ajudado o maior número de pessoas com o menor esforço.
Os erros que vejo sempre a repetirem-se
- Estados de validação vermelho/verde sem ícone. O mais comum de todos. Um contorno vermelho e um contorno verde são o mesmo contorno para milhões de utilizadores. Acrescente sempre um ícone e uma mensagem.
- Mapas de calor e gráficos que só variam na matiz. Um mapa de calor de verde para vermelho é um campo minado para CVD. Use uma escala sequencial que também varie a luminosidade (amarelo-claro para azul-escuro, por exemplo), ou acrescente etiquetas de valor.
- Legendas codificadas por cor, com correspondência feita só pela cor. Se a única forma de associar uma linha à sua etiqueta é "encontrar a verde", quem tem CVD fica encalhado. Ordene a legenda para corresponder aos dados, ou rotule diretamente sobre a linha.
- Assumir que "passou na WCAG" significa "é acessível". Contraste e CVD são eixos diferentes. Uma paleta pode ultrapassar os 4,5:1 em todo o lado e mesmo assim transformar-se numa papa na deuteranopia. Teste os dois.
- Desenhar apenas no seu próprio monitor perfeito. O mesmo ponto cego que esconde os problemas de contraste esconde os de CVD. Simule, sempre.
Nada disto lhe pede que desenhe interfaces feias ou que abandone a cor. A cor é maravilhosa e deve usá-la livremente. A disciplina é só esta: deixe a cor ser a camada deliciosa, nunca a única camada. Associe cada matiz com significado a uma etiqueta, um ícone ou uma forma; escolha combinações que sobrevivem ao colapso vermelho-verde; apoie-se tanto na luminosidade como na matiz; e corra o simulador antes de dar por terminado. Faça isto e o próximo engenheiro que não conseguir ver os seus pontos verdes vai mesmo assim saber exatamente quais os servidores que estão a arder.
Perguntas Frequentes
Qual é a diferença entre uma paleta acessível a daltónicos e uma paleta em conformidade com a WCAG?
Resolvem problemas diferentes. O contraste WCAG diz respeito à luminância — claro versus escuro — para que o texto e os elementos da interface sejam legíveis. O design acessível a daltónicos diz respeito à confusão de matizes — garantir que as cores que transmitem significado se mantêm distinguíveis para quem tem cones que colapsam certas matizes umas nas outras. Uma paleta pode passar no contraste WCAG em todo o lado e mesmo assim falhar na deuteranopia, porque duas cores com excelente contraste podem ainda depender de uma distinção vermelho-verde que desaparece. É preciso desenhar para os dois critérios, e testá-los, de forma independente.
Qual é a combinação de cores mais segura para o daltonismo?
Azul e laranja é o par oposto mais fiável — mantém-se claramente distinto na deuteranopia, na protanopia e na tritanopia, os três principais tipos de défice de visão das cores. Azul e vermelho é uma segunda opção forte. A combinação a evitar como único contraste é vermelho e verde, que colapsa para cerca de 99% dos casos de CVD, que são défices vermelho-verde. Quando precisar de mais de duas cores distintas, use um conjunto fundamentado em investigação, como a paleta Okabe-Ito (Wong), em vez de escolher a olho.
Porque é que não devo confiar só na cor para mostrar informação?
Porque cerca de 1 em cada 12 homens e 1 em cada 200 mulheres têm alguma forma de défice de visão das cores e, para essas pessoas, um estado indicado apenas pela cor (ponto vermelho = erro, ponto verde = sucesso) pode ser completamente indistinguível. O Critério de Sucesso 1.4.1 da WCAG (Utilização da Cor) exige que a cor nunca seja o único meio de transmitir informação. A solução é a redundância: associe cada cor com significado a uma etiqueta, um ícone, uma forma, um padrão ou uma posição, para que a informação sobreviva mesmo quando a matiz não sobrevive.
Como testo se a minha paleta é acessível a daltónicos?
Use um simulador, porque se tiver visão das cores normal as falhas são invisíveis para si. O Coblis (o Color Blindness Simulator) permite carregar uma captura de ecrã e vê-la através de oito tipos de défice. As DevTools do Chrome têm uma opção 'Emulate vision deficiencies' no painel Rendering, que aplica protanopia, deuteranopia ou tritanopia à página em tempo real. Plugins do Figma como o Stark fazem o mesmo nos designs. Verifique primeiro a deuteranopia, por ser a mais comum, e depois a protanopia e a tritanopia.
O que é a paleta Okabe-Ito e porque é recomendada?
A paleta Okabe-Ito (também chamada paleta Wong, em referência ao artigo de Bang Wong de 2011 na Nature Methods) é um conjunto de oito cores concebido para que estas se mantenham distinguíveis em todos os tipos comuns de défice de visão das cores. É o padrão de facto para visualização de dados acessível. Os códigos hexadecimais são #E69F00 (laranja), #56B4E9 (azul-céu), #009E73 (verde-azulado), #F0E442 (amarelo), #0072B2 (azul), #D55E00 (vermelhão), #CC79A7 (roxo-avermelhado) e #000000 (preto). Recorra a ela sempre que precisar de várias cores categóricas que não se confundam para quem tem CVD.
Quer experimentar com cores?
Experimente o nosso gerador de paletas de cores gratuito para encontrar a harmonia perfeita — com um verificador de contraste WCAG integrado.
Abrir o Gerador