Paletas de Cores Amigas para Daltónicos
Aprenda a escolher combinações de cores que funcionam para pessoas com daltonismo vermelho-verde e azul-amarelo. Testes práticos e técnicas que realmente fazem diferença.
O Desafio das Cores na Web
Cerca de 8% da população mundial tem algum tipo de daltonismo. Não é uma deficiência rara — é uma variação visual comum que afeta milhões de pessoas. A boa notícia? Você pode projetar interfaces que funcionam perfeitamente para todos.
O problema não está em usar cores. O problema está em contar apenas com cores para transmitir informação. Quando você combina cores inteligentemente com contraste e padrões, cria-se um design que funciona para praticamente qualquer pessoa.
Tipos de Daltonismo Mais Comuns
- Deuteranopia (falta de sensibilidade ao verde)
- Protanopia (falta de sensibilidade ao vermelho)
- Tritanopia (falta de sensibilidade ao azul)
- Acromatopsia (visão em escala de cinza — rara)
Princípios de Seleção de Cores
Não precisa de fórmulas complicadas. Existem alguns princípios simples que guiam as escolhas certas:
Contraste é o rei. Se duas cores têm contraste luminoso suficiente, elas funcionam mesmo que a matiz seja problemática. Teste sempre o contraste com uma ferramenta como WebAIM Contrast Checker.
Segundo, use padrões além de cores . Ícones, texturas, padrões — esses elementos ajudam a diferenciar áreas sem depender apenas da cor. Um gráfico vermelho e verde não é legível para muitas pessoas, mas um gráfico vermelho com linhas e um gráfico verde com pontos fica claro.
Terceiro, teste com simuladores. Ferramentas como Coblis e Color Blind Simulator mostram exatamente como seu design aparece para alguém com daltonismo. Não é um palpite — você vê o resultado real.
Paletas Comprovadas que Funcionam
Algumas combinações são praticamente universais. Azul e amarelo funcionam para praticamente todos os tipos de daltonismo. Por quê? Porque são cores com luminâncias muito diferentes.
Verde e roxo também funcionam bem. Você encontra essas combinações em muitos dos melhores designs acessíveis do mundo. Não é coincidência — é ciência.
Para fundos e textos, você tem mais liberdade. Preto, branco e tons de cinza funcionam universalmente. Se você adiciona uma cor de acento, escolha azul, verde, roxo ou amarelo. Evite combinações vermelho-verde a menos que tenha contraste luminoso muito alto (pelo menos 7:1).
A regra prática: se parece legível em escala de cinza (na imagem em preto e branco), funciona para daltônicos.
Como Testar Seu Design
Quatro passos simples para validar suas escolhas de cores
Medir Contraste
Use WebAIM Contrast Checker ou similar. Texto deve ter no mínimo 4.5:1 de contraste com o fundo. Objetos gráficos precisam de 3:1.
Simular Daltonismo
Abra seu design no Coblis ou Color Blind Simulator. Veja como fica para alguém com protanopia, deuteranopia e tritanopia. Se fica ruim, volte à paleta.
Converter para Escala de Cinza
Abra a imagem em Photoshop ou converter para escala de cinza. Se conseguir ler tudo em preto e branco, os daltônicos conseguem ver também.
Adicionar Padrões
Se uma cor sozinha não funciona, adicione ícones, padrões ou texturas. Não dependa apenas de cor — use múltiplas camadas de informação.
Ferramentas Essenciais
Recursos que você precisa para testar e validar suas paletas
WebAIM Contrast Checker
Insira dois valores hexadecimais e veja se o contraste passa em WCAG AA. Simples, rápido, confiável.
Coblis — Color Blindness Simulator
Upload sua imagem ou website e veja como aparece para diferentes tipos de daltonismo. Resultado em tempo real.
Color Universal Design
Palette designer online que cria combinações testadas para acessibilidade. Você desenha e ela valida.
Accessible Colors
Insira uma cor e veja quais cores funcionam como texto ou fundo com contraste adequado.
Chrome DevTools
Abre a aba de rendering, marca “Emulate vision deficiencies” e vê seu site em tempo real como alguém com daltonismo veria.
Figma Plugins
Instale “Color Blind” ou “A11y – Color Contrast Checker” diretamente no Figma para testar enquanto desenha.
“Não é sobre escolher cores especiais. É sobre ser inteligente com as cores que você escolhe. Contraste, padrões e testes — é isso que funciona.”
— Princípio fundamental de design acessível
Dicas Práticas para Seu Projeto
Nunca Use Apenas Vermelho e Verde
Essa combinação é a mais problemática para daltonismo vermelho-verde. Se precisa destacar duas opções, use verde e azul, ou vermelho e azul, ou adicione ícones diferentes.
Teste com Ao Menos 5% de Redução
Quando você converte para escala de cinza no Photoshop, não é exatamente o que um daltônico vê. É uma aproximação útil, mas combine com ferramentas de simulação reais.
Adicione Labels e Legendas
Em gráficos, sempre coloque rótulos. Em mapas de calor, use legendas claras. Não dependa do usuário adivinhar qual cor significa qual coisa.
Padrões Fazem Diferença Real
Um padrão de pontos versus linhas versus preenchimento sólido — tudo isso ajuda. Você não precisa de padrões elaborados. Simples já funciona.
Teste Seus Próprios Designs
Não assuma que funciona. Leve 5 minutos para testar no Coblis. Se alguma coisa ficar ilegível, ajuste. Problema resolvido antes do lançamento.
Priorize Contraste Luminoso
A luminância (quanto escuro ou claro) importa mais que a matiz. Uma cor escura em um fundo claro funciona para praticamente qualquer pessoa, independente do tipo de daltonismo.
Resumo: O Que Levar Adiante
Design inclusivo não é complicado. Você precisa de três coisas: contraste adequado, paletas que funcionam, e testes reais. Não é teórico — você literalmente vê se funciona ou não.
A maioria dos designers deixa a acessibilidade para o final, quando deveria estar no início. Se você começar com contraste e cores inclusivas, tudo fica mais fácil. Não é um trabalho extra — é a forma certa de fazer desde o começo.
Teste seu próximo design em escala de cinza. Jogue no Coblis. Use o Chrome DevTools. Cinco minutos agora economizam semanas de problemas depois. E você cria algo que realmente funciona para todos.
Nota Importante
Este artigo fornece orientações educacionais sobre design acessível para pessoas com daltonismo. As recomendações seguem os padrões WCAG (Web Content Accessibility Guidelines) e melhores práticas da indústria. Porém, cada pessoa vê as cores de forma ligeiramente diferente, e nenhuma paleta funciona para 100% das pessoas. O teste contínuo e feedback real de usuários é sempre recomendado. Este não é aconselhamento oftalmológico — para questões médicas relacionadas à visão, consulte um oftalmologista.
Tamanhos de Letra: Normas e Boas Práticas
Recomendações WCAG AA para tamanhos base, hierarquia tipográfica e quando aumentar fontes para melhor legibilidade.
Indicadores de Foco: Navegação por Teclado
Tornar o foco visível e acessível. Estilos CSS, cores de contraste e padrões que funcionam.
Princípios de Design Inclusivo em Portugal
Estrutura, espaçamento, contraste e movimento. Cinco pilares que tornam qualquer design acessível para todos.