Simulador de visão

Escolha suas cores e veja, em tempo real, como elas aparecem para pessoas com diferentes condições visuais.

Pré-visualização
Normal
Título do conteúdo
Texto de apoio e informações
Confirmar
Cancelar
Todas as simulações

Flashes e movimento

Animações acima de 3 flashes por segundo ou padrões repetitivos de alto contraste podem causar desconforto, enxaqueca ou crises epilépticas.

Atenção: esta aba contém exemplos de animações potencialmente incômodas para fins de aprendizado. Se você tem fotossensibilidade, role rapidamente pela seção de exemplos de risco.
Teste interativo de frequência
1.0 Hz
Regra WCAG 2.1 — critério 2.3.1:
Nenhum elemento deve piscar mais de 3 vezes por segundo em área maior que 25% do campo visual central. Acima disso é potencialmente perigoso.

Exemplos de risco

Flash intenso (~3 Hz)
Flash vermelho rápido Perigoso
Listras de alto contraste em movimento Evitar

Alternativas seguras

●
Pulso suave (0.4 Hz) Seguro
Padrão estático de baixo contraste
Padrão sem movimento Seguro
Regras de animação segura
3 Hz
Frequência máxima
Nunca mais de 3 flashes por segundo em qualquer elemento visível na tela
25%
Área máxima
Elemento piscante não deve ocupar mais de 25% do campo visual central
300ms
Transições mínimas
Transições de tela inteira devem durar pelo menos 300ms para ser suaves
Alto contraste
Flashes mais perigosos
Alternância entre preto e branco é mais perigosa que tons escuros de baixo contraste
Listras
Padrões em movimento
Listras animadas de alto contraste são tão perigosas quanto flashes diretos
@media
Respeite o sistema
Em materiais digitais, use prefers-reduced-motion para desativar animações a pedido do usuário

Verificar paleta

Cole qualquer lista de cores e o verificador testa todas as combinações possíveis de contraste de uma vez só.

Cole suas cores

Uma por linha ou separadas por vírgula/espaço. Formato: #RRGGBB

Atalho: Ctrl + Enter

—
pares
—
aprovados AA
—
reprovados
Filtrar por
Resultados
◈
Cole suas cores e clique em verificar

Condições visuais

Entenda cada condição, como ela altera a percepção de cores e o que muda no dia a dia de quem a tem.

Boas práticas

Diretrizes para criar imagens, apresentações, sites e qualquer material visual que funcione para todos.

✓ O que fazer

✗ O que evitar

Referências de contraste — WCAG 2.1
3,0:1
Bordas de botão, ícones e campos de formulário
AA Mínimo UI
3,0:1
Texto grande: 18pt ou mais, ou 14pt em negrito
AA Texto grande
4,5:1
Texto normal de qualquer tamanho abaixo de 18pt
AA Texto normal
7,0:1
Excelência: textos pequenos, baixa visão, impressão
AAA Excelência
A regra mais importante — princípio da redundância

Nunca dependa somente da cor para comunicar algo. Toda informação visual transmitida por cor precisa ter pelo menos um segundo canal — forma, ícone, padrão, texto ou posição.

Cor + Forma

Botão de confirmação com ícone ✓ verde. Botão de cancelar com ✗ vermelho.

Cor + Texto

Barra vermelha com rótulo "Erro". Linha verde com "Aprovado".

Cor + Padrão

Gráfico com cores diferentes e preenchimentos distintos: sólido, listrado, pontilhado.

Cor + Posição

Semáforo: cor + posição vertical do círculo. O vermelho é sempre o de cima.

Analisar imagem

Envie qualquer imagem e veja como ela aparece para diferentes condições visuais — pixel por pixel, sem nenhuma IA. Tudo acontece no seu navegador.

🖼
Solte uma imagem aqui
Funciona com prints de tela, fotos, slides, cartazes, infográficos — qualquer imagem que você queira testar.
Clique para buscar Ctrl + V para colar Arraste e solte
Clique em qualquer condição para simular. O comparador mostra original vs simulado.
Comparador — arraste o divisor
Como funciona: cada pixel da imagem passa pela mesma transformação matemática usada no simulador de cores — sem nenhuma inteligência artificial. Os resultados são uma aproximação científica de como a imagem é percebida.
Análise de contraste
Contraste médio —
Avaliação geral —
Contraste mínimo encontrado —
Áreas com contraste baixo (<3:1) —
Cores dominantes da imagem

Clique em uma cor para usar no simulador.

Contraste entre cores dominantes

Paletas seguras

Cores e combinações testadas que funcionam para a maioria das condições de daltonismo. Clique em qualquer cor para ver no simulador.

Cores universalmente acessíveis

Combinações com bom contraste

Clique para testar no simulador.

Estas combinações são problemáticas. Evite-as quando a cor for o único canal de informação.

Combinações problemáticas

Paleta para comunicação visual — alto contraste

Curada para materiais que precisam ser legíveis em tela, impressos e projetados. Clique para testar.