Simulador de daltonismo: veja como pessoas daltônicas enxergam suas cores
Com o simulador de daltonismo gratuito, você vê sua paleta de cores e suas imagens como pessoas com protanopia (cegueira para o vermelho), deuteranopia (cegueira para o verde), deuteranomalia (dificuldade de perceber o verde), tritanopia (cegueira para o azul) ou acromatopsia as percebem. Os cinco tipos aparecem lado a lado. Sem cadastro: cores e imagens são processadas apenas no seu navegador e nunca são enviadas.
Criado por Justin Schuessler
Já verificou a acessibilidade do design? Coloque seu site no ar com uma hospedagem web rápida e confiável.
Editar cor
Calculado imediatamente em todas as variantes simuladas abaixo. Selecione uma cor da sua paleta abaixo para editá-la aqui.
Sua paleta de cores
Clique numa cor para a editar no seletor acima. Use o sinal de mais para adicionar mais cores e ver toda a paleta em simultâneo em cada variante simulada.
Pré-visualização simulada
Quer verificar também se sua paleta tem contraste suficiente? Verifique também o contraste da paleta que acabou de simular
Continuar com a cor selecionada: Abrir no seletor de cores · Gerar esquema de cores
Funciona inteiramente no seu navegador — nada é enviado para um servidor, salvo ou registrado.
Funções
Simule o daltonismo online: confira cores e imagens
Além das suas imagens, você pode conferir uma paleta inteira usando valores Hex ou RGB, o que é útil para web design, cores de marca e gráficos.
Cinco tipos de daltonismo lado a lado
Ao lado do original, o simulador mostra simultaneamente cada cor com protanopia, deuteranopia, tritanopia, acromatopsia e deuteranomalia. Assim, você identifica rapidamente quais cores ficam parecidas.
Conferir uma paleta inteira de uma vez
Use o botão de mais para adicionar quantas cores quiser, como toda a paleta da sua marca. O valor Hex aparece abaixo de cada cor, e cada tipo simulado mostra a paleta inteira.
Seletor de cores, Hex ou RGB
Escolha cores no seletor com controle de tonalidade, digite um valor Hex ou RGB ou gere uma nova cor com “Cor aleatória”.
Simular suas próprias imagens
Se quiser, envie um PNG ou JPG de até 15 MB, como uma captura de tela, um logotipo ou um gráfico. Imagens grandes são reduzidas para 1.600 px no lado mais longo para a prévia, que pode ser ampliada com um clique.
Modelo científico de simulação
A simulação usa o modelo de Machado, Oliveira & Fernandes (2009) e realiza os cálculos no espaço de cores RGB linear. Amostras de cor e pixels de imagem passam pelo mesmo cálculo.
Tudo fica no seu navegador
As cores e imagens são processadas diretamente no seu navegador. Nada é enviado a um servidor, armazenado ou registrado, e você não precisa de uma conta.
Tipos de daltonismo
Como as pessoas daltônicas enxergam? Os cinco tipos simulados
A maioria das pessoas daltônicas enxerga cores, mas confunde certos tons. Os tons afetados dependem do tipo de deficiência na visão de cores.
| Forma | Como as cores são percebidas | Simulação na ferramenta |
|---|---|---|
| Protanopia (cegueira para o vermelho) | Vermelho e verde são difíceis de distinguir. Os tons de vermelho parecem mais escuros e se aproximam de tons de oliva, marrom e amarelo. | Intensidade máxima (grau de severidade 1,0) |
| Deuteranopia (cegueira para o verde) | Vermelho e verde são confundidos e aparecem como tons semelhantes de amarelo, marrom e oliva. | Intensidade máxima (grau de severidade 1,0) |
| Tritanopia (cegueira para o azul) | Azul e verde, assim como amarelo e violeta, são difíceis de distinguir. O amarelo parece rosa-claro ou cinza-claro. Já o vermelho e o verde continuam fáceis de identificar. | Intensidade máxima (grau de severidade 1,0) |
| Acromatopsia (daltonismo completo) | Praticamente nenhuma cor é percebida, apenas diferenças de luminosidade, como em uma imagem em tons de cinza. | Luminância relativa (tons de cinza) |
| Deuteranomalia (dificuldade de perceber o verde) | Forma atenuada da deuteranopia e a deficiência de visão de cores mais comum: os tons de vermelho e verde ficam mais parecidos. | Forma atenuada (grau de gravidade 0,6) |
Experimente: digite #FF0000 no simulador, adicione uma segunda cor pelo botão de mais e defina-a como #00FF00. Nos cartões de protanopia e deuteranopia, você verá que as duas cores se tornam tons de amarelo e oliva, diferenciando-se quase só pela luminosidade.
Como funciona
Simule o daltonismo em 6 passos
Da primeira cor à comparação dos cinco tipos, usando sua paleta e, se quiser, uma imagem sua.
Passo 1
Escolher cor
Na seção “Editar cor”, escolha uma cor no seletor com controle de tonalidade, digite um valor Hex ou RGB ou clique em “Cor aleatória”.
Passo 2
Montar uma paleta de cores
Use o botão de mais em “Sua paleta de cores” para adicionar outras cores. Clique em uma cor para carregá-la no seletor e editá-la. Para removê-la, use o ícone de lixeira.
Passo 3
Enviar uma imagem (opcional)
Arraste um PNG ou JPG de até 15 MB para a área “Enviar imagem própria” ou clique nela para selecionar um arquivo. A imagem permanece no seu navegador.
Passo 4
Comparar variações
Em “Prévia simulada”, compare o original com protanopia, deuteranopia, tritanopia, acromatopsia e deuteranomalia e observe quais cores ficam parecidas demais.
Passo 5
Ampliar imagem
Clique em uma prévia para ampliá-la e conferir os detalhes.
Passo 6
Continue trabalhando com a cor
Use os links abaixo da prévia para abrir a cor selecionada no Color Picker ou no gerador de esquemas de cores, ou confira o contraste dela no Contrast Checker.
Cores acessíveis
Por que ter em conta as dificuldades de visão das cores no design?
Deficiências na visão de vermelho e verde afetam cerca de 8 % dos homens e 0,5 % das mulheres (principalmente entre pessoas de ascendência europeia), o que corresponde a uma estimativa de aproximadamente 300 milhões de pessoas no mundo. Quem transmite uma informação importante apenas pela cor, como vermelho para “Erro” e verde para “Sucesso”, sem um símbolo ou texto adicional, acaba excluindo sem querer uma parcela relevante dos seus usuários.
Por isso, as WCAG exigem que a cor nunca seja o único recurso para diferenciar informações (critério de sucesso 1.4.1). Combine cores com ícones, padrões ou rótulos e use o simulador para verificar quais cores da sua paleta ficam parecidas demais para pessoas com deficiência na visão de cores. Depois, confira se o texto e o fundo têm contraste suficiente no Contrast Checker. Ir para o Contrast Checker
Descobrir mais
Mais ferramentas de cores
Confira o contraste, ajuste as cores, crie um esquema de cores ou extraia cores de uma imagem. Tudo isso também é grátis e funciona no navegador.
Verificador de contraste
Calcule em tempo real a relação de contraste WCAG entre duas cores e verifique a conformidade com AA/AAA e os requisitos para componentes da interface — tudo no navegador.
Criado por Justin Schuessler
Seletor de cores
Converta cores em tempo real entre HEX, RGB, HSL, HSV e CMYK, encontre a cor CSS com nome mais próxima e verifique o contraste WCAG com preto/branco — tudo no navegador.
Criado por Justin Schuessler
Gerador de esquemas de cores
Crie em tempo real esquemas de cores complementares, análogos, triádicos e outros a partir de uma cor base — nada é salvo ou transmitido.
Criado por Justin Schuessler
Seletor de cores em imagem
Identifique o código de uma cor em uma imagem: conta-gotas com lupa, HEX, RGB e HSL, paleta de cores da imagem e indicação de contraste. A imagem permanece no navegador.
Criado por Dimitri Heissler
FAQ
Perguntas frequentes sobre o simulador de daltonismo
Respostas rápidas sobre deficiência na visão de cores, cores acessíveis e esta ferramenta.
A maioria das pessoas daltônicas enxerga cores, mas confunde certos tons. Na protanopia e na deuteranopia, vermelho e verde se tornam tons semelhantes de amarelo, marrom e oliva. Na tritanopia, é difícil distinguir azul de verde e amarelo de violeta. Apenas na acromatopsia as cores desaparecem por completo, restando diferenças de luminosidade como em uma imagem em tons de cinza. No simulador, você pode ver isso nas suas próprias cores.
Cinco tipos ao lado do original: protanopia (cegueira para o vermelho), deuteranopia (cegueira para o verde), deuteranomalia (dificuldade de perceber o verde), tritanopia (cegueira para o azul) e acromatopsia (daltonismo completo). Os cinco são exibidos simultaneamente, lado a lado, para cada cor da sua paleta e para uma imagem enviada.
As deficiências na visão de vermelho e verde são as mais comuns, especialmente a deuteranomalia, uma dificuldade mais leve de perceber o verde. Elas afetam cerca de 8 % dos homens e 0,5 % das mulheres (valores para pessoas de ascendência europeia), ou aproximadamente 300 milhões de pessoas no mundo. Mulheres também podem ser daltônicas, embora isso seja bem menos frequente.
Não. O simulador mostra como pessoas com deficiência na visão de cores percebem as cores; ele não é um teste de visão nem fornece diagnósticos. Se quiser verificar sua própria visão de cores, procure um oftalmologista ou optometrista, que pode usar, por exemplo, as placas de Ishihara.
O simulador de daltonismo é gratuito e não exige cadastro. As imagens não são enviadas: a ferramenta lê o arquivo diretamente no seu navegador e calcula as variações usando Canvas, sem transmissão a um servidor, armazenamento ou registro de atividades. Você pode usar arquivos PNG e JPG de até 15 MB. Para a prévia, imagens são reduzidas a no máximo 1.600 px no lado mais longo. Ao fechar a aba, a imagem desaparece.
Sim. Use o botão de mais para adicionar quantas cores quiser e vê-las simultaneamente em cada um dos cinco tipos simulados. Clique em uma cor para carregá-la no seletor e editá-la. Para removê-la, use o ícone de lixeira. Assim, você descobre se duas cores da sua paleta, como as cores da sua marca, ficam parecidas demais para pessoas com deficiência na visão de cores.
A base é o modelo fundamentado na fisiologia de Machado, Oliveira & Fernandes (2009), com as matrizes publicadas no estudo. Os cálculos são feitos no espaço de cores RGB linear após a conversão de sRGB. Protanopia, deuteranopia e tritanopia são simuladas em intensidade máxima (grau de severidade 1,0), deuteranomalia com grau de severidade 0,6 e acromatopsia como luminância relativa. A intensidade da deficiência na visão de cores varia de pessoa para pessoa; por isso, a simulação mostra uma percepção típica.
Vermelho e verde merecem atenção especial, assim como verde e marrom ou azul e violeta, quando a cor é o único recurso para diferenciá-los. Em vez de deixar de usar essas cores, acrescente textos, ícones ou padrões e confira sua paleta no simulador. Se duas cores ficarem quase iguais em alguma simulação, ajuste a luminosidade ou o tom. Depois, confira o contraste entre texto e fundo no Contrast Checker.
Mais alguma pergunta?
Contatar o suporteSeu projeto de frontend precisa de um servidor confiável por trás
Um VPS da ZAP-Hosting mantém sua aplicação ou projeto online de forma confiável.
Sem configuração. Sem riscos. Online em segundos.
Procurando mais ferramentas? Ver todas as ferramentas de imagem e design
