# Paletas para daltónicos e como testar os teus designs [Canonical HTML page](https://gradiently.design/pt-pt/guide/color-blindness-design) A maior parte das deficiências de visão das cores não é ver em cinzento. É certos pares de cores a fundirem-se numa só. Escolhe cores que difiram na luminosidade e desenhas à volta do problema. ## The short version - Uma paleta para daltónicos usa cores que diferem claramente na luminosidade, e não só no tom, para continuarem distintas quando alguns tons parecem iguais. - A confusão entre vermelho e verde é de longe o tipo mais comum de deficiência de visão das cores; a confusão entre azul e amarelo é muito mais rara, e não ver cor nenhuma é ainda mais raro. - A paleta de oito cores de Okabe e Ito foi concebida para se manter distinguível nos tipos comuns de daltonismo e é de uso livre. - Nunca deixes a cor transmitir significado sozinha: acrescenta também uma etiqueta, um ícone, um padrão ou uma posição. - As ferramentas de programador do Chrome e do Edge simulam vários tipos de daltonismo em qualquer página, e uma verificação em escala de cinzentos apanha a maioria dos problemas em segundos. Uma **paleta para daltónicos** é um conjunto de cores que continuam distintas para quem confunde certos tons, normalmente vermelhos e verdes. O truque é separar as cores pela luminosidade e também pelo tom, e nunca deixar a cor ser o único sinal. Um azul escuro e um laranja claro continuam diferentes para quase toda a gente; um vermelho médio e um verde médio, com luminosidade parecida, podem parecer o mesmo castanho enlameado. Abaixo ficam paletas que podes copiar, os pares a evitar e três formas grátis de testar o teu trabalho. ## Tipos de daltonismo, em resumo A visão das cores depende de três tipos de cones no olho, afinados mais ou menos para comprimentos de onda longos, médios e curtos. Quando um tipo falta ou está desviado, algumas cores que parecem diferentes à maioria das pessoas passam a parecer iguais. O [artigo da WebAIM sobre daltonismo](https://webaim.org/articles/visual/colorblind) trata da biologia; para o design, o que importa é esta tabela. | Tipo | Cones afetados | Cores que se confundem | Frequência | | --- | --- | --- | --- | | Deuteranomalia e deuteranopia | Verde (médios) | Vermelho com verde, verde com castanho, azul com roxo | O mais comum | | Protanomalia e protanopia | Vermelho (longos) | Vermelho com verde e preto, os vermelhos parecem mais escuros | Comum | | Tritanomalia e tritanopia | Azul (curtos) | Azul com verde, amarelo com rosa ou cinzento | Raro | | Acromatopsia | Todos | Tudo se vê em tons de cinzento | Muito raro | Os tipos vermelho e verde herdam-se no cromossoma X, por isso são muito mais comuns nos homens do que nas mulheres. O fio condutor: o tom deixa de ser fiável, mas **a luminosidade mantém-se**. Uma pessoa com deuteranopia continua a ver claramente que uma cor é mais escura do que outra. Este único facto está por trás de todas as regras abaixo. ## Uma paleta para daltónicos que podes copiar O conjunto seguro mais conhecido é a paleta proposta por Masataka Okabe e Kei Ito para figuras científicas. As suas oito cores foram escolhidas para continuarem distinguíveis nos tipos comuns de daltonismo, e funciona igualmente bem em gráficos, mapas, etiquetas e cores de estado num produto. - Preto #000000: #000000 - Laranja #e69f00: #e69f00 - Azul-céu #56b4e9: #56b4e9 - Verde azulado #009e73: #009e73 - Amarelo #f0e442: #f0e442 - Azul #0072b2: #0072b2 - Vermelhão #d55e00: #d55e00 - Roxo avermelhado #cc79a7: #cc79a7 A paleta de Okabe e Ito. Usa o menor número de cores de que precisares; quatro ou cinco são mais fáceis para todos do que oito. Para trabalho de marca, oito cores costumam ser demais. O par único mais seguro é **azul e laranja**: ficam em lados opostos da linha de confusão entre vermelho e verde e diferem na luminosidade, por isso leem-se como diferentes para quase toda a gente. Azul com amarelo, e roxo escuro com verde claro, também aguentam bem. ### Gradientes e escalas para dados Em mapas de calor e gráficos que mostram um intervalo, usa uma escala cuja luminosidade mude de forma constante de uma ponta à outra. Uma escala de vermelho para verde falha duas vezes: as pontas confundem-se para leitores daltónicos e ambas têm luminosidade parecida. Azul para laranja, ou um só tom do escuro ao claro, funciona para quase todos. - Evita: do vermelho ao verde: `linear-gradient(90deg, #d7263d, #f5f5f5, #2e9e44)` - Seguro: do azul ao laranja: `linear-gradient(90deg, #0072b2, #f5f5f5, #e69f00)` - Seguro: do roxo escuro ao amarelo: `linear-gradient(90deg, #440154, #3b528b, #21918c, #5ec962, #fde725)` A última escala segue as cores viridis, muito usadas: a luminosidade sobe de forma uniforme, por isso sobrevive até à impressão em escala de cinzentos. ## Pares a evitar e o que usar em vez deles Algumas combinações dão problemas vezes sem conta. O vermelho `#d7263d` e o verde `#2e9e44` acima parecem claramente diferentes à maioria das pessoas, mas a sua luminosidade percebida é quase idêntica (cerca de 57% e 62% em [OKLCH](https://gradiently.design/pt-pt/guide/oklch-explained)), por isso, para quem tem deuteranopia, pouco resta para os distinguir. ### Evita lado a lado - Vermelho e verde com luminosidade parecida - Verde e castanho - Azul e roxo - Verde claro e amarelo - Rosa e cinzento, ou amarelo e cinzento claro ### Usa antes - Azul e laranja - Azul escuro e amarelo claro - Roxo escuro e verde claro - Um só tom em degraus de luminosidade bem diferentes - Qualquer par mais uma etiqueta ou um ícone Se as cores da tua marca são vermelho e verde, não precisas de as mudar. Basta fazer uma claramente mais escura do que a outra e nunca as usar como única diferença entre, por exemplo, um ganho e uma perda. Uma seta ou um sinal de mais e de menos resolve para todos. A escolha das cores à partida está em [como escolher as cores da marca](https://gradiently.design/pt-pt/guide/how-to-choose-brand-colors). ## Nunca dependas só da cor Esta é a regra que mais conta, e faz também parte das Diretrizes de Acessibilidade para o Conteúdo da Web. Se a legenda de um gráfico, o erro de um formulário, um selo de «em stock» ou um mapa só diferem pela cor, alguns leitores perdem o significado. Acrescenta um segundo sinal: - **Etiquetas** diretamente nas linhas e barras dos gráficos, em vez de uma chave de cores. - **Ícones** para os estados: um visto para sucesso, uma cruz ou um sinal de aviso para erros. - **Padrões ou estilos de linha**, como linhas a tracejado e contínuas, nos gráficos. - **Posição e ordem**, para o primeiro item significar sempre a mesma coisa. - **Contraste do texto** que passe por si só, verificado com um [verificador de contraste](https://gradiently.design/pt-pt/guide/color-contrast-accessibility). Os gráficos para redes sociais pedem o mesmo cuidado. Uma publicação que diz «verde quer dizer disponível» sobre um calendário vermelho e verde perde alguns leitores. As palavras transmitem melhor, e as próprias palavras têm de se ler contra o fundo, sobretudo em gradientes, onde o contraste muda ao longo do enquadramento. [Texto sobre gradientes](https://gradiently.design/pt-pt/guide/text-on-gradient) trata disso em detalhe. O anúncio de um workshop em que o título fica numa zona carregada do gradiente, com pouco contraste de luminosidade Quando o texto e o fundo têm luminosidade parecida, o tom faz todo o trabalho, e é exatamente isso que alguns leitores perdem. O mesmo anúncio de workshop com uma zona mais calma e escura atrás do título para se ler com clareza Com uma zona calma e mais profunda atrás das palavras, o contraste está na luminosidade, que todos os leitores veem. A versão da direita é o que um Mark do Gradiently faz sozinho: leva a sua zona mais calma e de melhor contraste para trás do texto e a Tinta automática escolhe letra clara ou escura para cada linha, por isso a separação vem da luminosidade e não do tom. ## Como testar um design para daltonismo 1. **Faz a verificação em cinzentos** Exporta ou captura o design e passa-o a escala de cinzentos. Se duas cores com significados diferentes ficarem o mesmo cinzento, muda a luminosidade de uma. 2. **Simula no navegador** No Chrome ou no Edge, abre as ferramentas de programador, o menu de comandos, escreve Rendering e usa **Emulate vision deficiencies** para ver a página ao vivo como protanopia, deuteranopia, tritanopia ou acromatopsia. 3. **Verifica o ecrã inteiro em cinzentos** O Mac e o Windows incluem um filtro de cor em escala de cinzentos nas definições de acessibilidade. Liga-o para rever aplicações, ficheiros de design e exportações, e não só páginas web. 4. **Tira a cor e lê outra vez** Pergunta se todos os gráficos, selos e estados continuam a fazer sentido só com etiquetas e ícones. Se sim, a cor é decoração, que é o lugar dela. As simulações são aproximações, e a visão das cores varia de pessoa para pessoa. Se a acessibilidade importa para o teu produto, pede a daltónicos que conheças que olhem para o resultado real. Para gráficos em particular, [design de infografias](https://gradiently.design/pt-pt/guide/infographic-design) fala mais de etiquetas e layout, e [harmonia de cores](https://gradiently.design/pt-pt/guide/color-harmony) ajuda quando precisas de uma paleta segura que continue a parecer cuidada. ## FAQ ### Que cores são melhores para daltónicos? Azul e laranja são o par mais seguro, seguido de azul e amarelo. Acima de tudo, escolhe cores que difiram claramente na luminosidade, para continuarem distintas mesmo quando os tons parecem iguais. ### O que é a paleta Okabe Ito? Um conjunto de oito cores (preto, laranja, azul-céu, verde azulado, amarelo, azul, vermelhão e roxo avermelhado) concebido para se manter distinguível nos tipos comuns de daltonismo. ### Que cores devo evitar juntas? Vermelho com verde, verde com castanho, azul com roxo e verde claro com amarelo, sobretudo quando têm luminosidade parecida. ### Como posso ver o meu design como um daltónico o veria? Nas ferramentas de programador do Chrome ou do Edge, abre o painel Rendering e escolhe uma opção em Emulate vision deficiencies. Uma captura rápida em escala de cinzentos também revela cores que dependem só do tom. ### Tenho de mudar as cores vermelha e verde da minha marca? Não. Faz uma visivelmente mais escura do que a outra e acrescenta etiquetas ou ícones sempre que as cores transmitirem significado.