Algo errado nesta ferramenta?
Sobre «Color Blindness CSS Reference Online»
Esta ferramenta gera uma referência CSS para projetar paletas de cores acessíveis que funcionam para usuários com deficiências de visão de cores. Mostra como as cores aparecem sob diferentes tipos de daltonismo (protanopia, deuteranopia, tritanopia, monocromasia) e sugere alternativas mais seguras.
Cerca de 8% dos homens e 0,5% das mulheres têm alguma forma de deficiência de visão de cores. Projetar apenas para visão completa de cores os exclui — usar pares de cores seguros e não confiar apenas em cor (usando forma, texto, ou padrão também) faz seus designs funcionarem para todos.
Use para testar paletas de marca, auditar designs existentes para problemas de acessibilidade, ou aprender quais pares de cores são problemáticos para evitá-los em futuros designs.
Como usar esta ferramenta
Como obter um snippet CSS de filtros para simular daltonismo
Rode sem input
A ferramenta não tem campos — apenas aperte Run. Retorna um snippet CSS pronto para colar na sua stylesheet (sem configuração adicional).
O que você recebe
Resultado: um único campo `css` com três classes de filtro: `.cb-protanopia`, `.cb-deuteranopia`, `.cb-tritanopia`. Cada uma usa uma matriz SVG `feColorMatrix` aproximando um tipo de deficiência da visão de cores.
Como usar
Adicione a classe ao `body` (ou wrapper) para visualizar como ~8% dos homens com daltonismo verde-vermelho, ou uma fração bem menor com azul-amarelo, veriam seu design. Alterne a classe pelo devtools — sem rebuild.
Ressalvas
Aproximações lineares; a visão real é mais sutil. Sim Daltonism (macOS) ou Coblis usam modelos melhores. Sempre combine essa simulação com verificações de contraste WCAG (wcag-contrast-checker-online) — a cor nunca deve ser o único veículo de informação.