Simulador de visão
Digite o endereço de uma página e veja-a através de oito tipos de visão, com a página sem filtro ao lado. Links, alertas e gráficos que dependem só da cor ficam fáceis de identificar.
Três sensores, e o que acontece quando falta um
A retina mede a cor com três tipos de cone, cada um mais sensível a uma faixa diferente de luz: ondas longas (vermelho), médias (verde) e curtas (azul). O cérebro deduz a cor comparando os três sinais. Se um tipo falta ou está deslocado, algumas dessas comparações deixam de ser possíveis, e cores que diferem só naquele eixo acabam parecendo iguais.
Os genes dos cones vermelho e verde ficam no cromossomo X, e é por isso que cerca de 1 homem em 12 tem alguma forma de deficiência vermelho-verde, contra mais ou menos 1 mulher em 200. A maioria tem um cone enfraquecido, não ausente. O que essas pessoas veem fica em algum ponto entre a visão normal e a simulação completa mostrada aqui.
As oito visões
| Visão | O que ela simula | O que costuma falhar |
|---|---|---|
| Visão normal | A referência, mostrada sem filtros | |
| Deuteranopia | Nenhum cone verde funcionando; com as formas mais leves, cerca de 6% dos homens | Cores de status vermelha e verde, laranja ao lado de verde |
| Protanopia | Nenhum cone vermelho funcionando; cerca de 2% dos homens com as formas mais leves | Texto vermelho em fundo escuro, que fica quase preto |
| Tritanopia | Nenhum cone azul funcionando; menos de 1 pessoa em 10.000 | Azul contra verde, amarelo contra rosa |
| Acromatopsia | Só a luminosidade. Também uma página num leitor de e-books monocromático ou numa impressão em preto e branco | Qualquer significado transmitido pela tonalidade |
| Baixa visão | Nitidez reduzida, como ler sem os óculos | Texto pequeno, fontes finas, ícones sem rótulo |
| Catarata | Um cristalino turvo e amarelado, comum depois dos 60 | Texto cinza-claro, links azul-claros |
| Tela no sol | Um celular ao ar livre ao meio-dia | Tudo o que tem contraste modesto |
As três visões de daltonismo usam as matrizes de transformação publicadas por Machado, Oliveira e Fernandes em 2009, com severidade total, aplicadas em RGB linear para que a luminosidade continue fiel. As outras visões são feitas com filtros CSS: tons de cinza para a acromatopsia, desfoque de 2,5 pixels para a baixa visão, desfoque com tom sépia e contraste reduzido para a catarata, e contraste bem reduzido com brilho aumentado para o sol.
Uma revisão de cinco minutos
- Deuteranopia, depois os links. Encontre os links dentro de um parágrafo. Se você não consegue mais distingui-los do texto em volta, acrescente um sublinhado.
- Deuteranopia, depois os estados. Olhe os erros de formulário, as etiquetas de estoque, as bolinhas de “online” e as legendas de gráficos. Uma mensagem vermelha e uma verde também devem se diferenciar por um ícone ou uma palavra.
- Acromatopsia. Confira se o botão principal ainda se destaca do secundário. Se os dois viram o mesmo cinza, a tonalidade era a única diferença entre eles.
- Baixa visão. Você ainda deve conseguir achar o título, a navegação e a ação principal pela forma e pela posição.
- Sol, em largura de celular. O texto que some aqui é o primeiro a escurecer. Meça-o na calculadora de razão de contraste.
As WCAG colocam a regra por trás de tudo isso no critério de sucesso 1.4.1: a cor não pode ser o único meio visual de transmitir uma informação.
Como a prévia é feita, e seus limites
Nosso servidor baixa o HTML (até 2,5 MB), remove todo script, frame e manipulador de eventos e envia o resultado ao seu navegador, que o exibe num frame isolado (sandbox). O frame não pode executar código nem enviar formulários. As imagens, fontes e folhas de estilo dele são pedidas pelo seu navegador direto ao site original.
Isso tem dois efeitos colaterais. Conteúdo que um site monta com JavaScript, como carrosséis, seções com carregamento tardio ou aplicações de página única inteiras, pode faltar ou parecer inacabado. E algumas fontes da web se recusam a carregar fora do próprio domínio, então a tipografia pode ser diferente da página real.
Uma simulação é uma aproximação, mostrada na sua própria tela para os seus próprios olhos. Ela é boa para revelar onde um design depende da cor. Não consegue dizer o que uma pessoa específica percebe. A opinião de pessoas com deficiência na visão de cores ou com baixa visão vale mais que qualquer filtro.
Perguntas frequentes
Qual é o tipo mais comum de daltonismo?
A deuteranomalia, uma resposta enfraquecida dos cones verdes. Junto com a deuteranopia, sua forma completa, ela afeta cerca de 6% dos homens. É por isso que esta ferramenta abre na visão de deuteranopia.
Pessoas daltônicas enxergam em preto e branco?
Quase nunca. A ausência total de visão de cores (acromatopsia) afeta cerca de 1 pessoa em 30.000. A maioria das pessoas com alguma deficiência vê muitas cores e confunde pares específicos, geralmente no eixo vermelho-verde.
Quais cores são seguras para usar juntas?
Pares com diferença clara de luminosidade continuam distintos com qualquer filtro, azul-escuro com amarelo ou laranja, por exemplo. Vermelho com verde, verde com marrom e azul com roxo são as combinações a evitar quando as duas cores querem dizer coisas diferentes.
Por que minha página parece quebrada na prévia?
A prévia roda sem JavaScript. Se o layout, o menu ou o conteúdo dependem de scripts, essas partes vão faltar. Os filtros continuam sendo aplicados corretamente a tudo o que aparece.
Posso testar uma página que exige login?
Não. Nosso servidor pede a página como visitante anônimo e não tem acesso à sua sessão, então só recebe a tela de login. Para páginas atrás de um login, use a emulação de deficiências visuais embutida nas ferramentas de desenvolvedor do Chrome ou do Firefox.