Colorblind Web Page Filter: acessibilidade por simulação de deficiências cromáticas

Colorblind Web Page Filter permite simular diferentes tipos de deficiências cromáticas. Saiba mais a respeito da ferramenta para testes de acessibilidade.

Ir para o artigo

Anos atrás, lançamos este artigo sobre a Colorblind Web Page Filter, ferramenta para “ver os sites através dos olhos de quem tem cegueira de cor”, que é a incapacidade que algumas pessoas têm de diferenciar certas cores.

A ferramenta foi adquirida pela Toptal e, recentemente, recebemos uma mensagem de Irene Papuc pedindo uma atualização no artigo para anunciar a recente aquisição e os aprimoramentos da ferramenta. Eis o repost do conteúdo, revisado e atualizado, para que todos conheçam esta magnífica ferramenta de cores.

Sobre o Colorblind Web Page Filter

A primeira grande diferença a se notar é a apresentação do Colorblind Web Page Filter. A ferramenta está bem mais bonita, simples e mais intuitiva de se usar: informe o URL e com o filtro de cor que simula a deficiência cromática que deseja simular e pronto, veja as diferenças lado a lado. Simples, rápido, direto ao ponto.

Colorblind Web Page Filter: screenshot da ferramenta
Simulação de deuteranopia no site desenvolvimentoparaweb.com (clique para ampliar)

Como é possível ver, também há a opção de copiar o URL diretamente com o filtro de cores aplicado para compartilhamento e, para uma melhor visualização de detalhes, colocar o comparativo em tela cheia. O objetivo da ferramente se cumpre com muito mais facilidade: enxergar páginas web (inclusive imagens) como se tivesse alguma deficiência cromática.

O processo de simulação é bem rápido e a renderização não demora a acontecer. Através da escolha de diferentes tipos de cegueira de cores, de forma ligeira o comparativo é renderizado conforme se escolheu.

A Colorblind Web Page Filter é uma ferramenta diferente e útil: diferente devido ao fato de não ser comum este tipo de simulação em desenvolvimento web, principalmente na parte de web design; útil porque, através da visualização e percepção de como pessoas que apresentam algum distúrbio visual cromático enxergam o mundo, isso abre espaço para se pensar mais em acessibilidade na web.

Em poucos segundos é possível testar se aquelas cores que seu time passou meses escolhendo e/ou aquelas imagens compradas para aumentar o engajamento servem também a pessoas que possuem diferentes tipos de cegueira cromático e, claro, podem fazer parte do rol de consumidores de seu incrível produto inovador.

Sobre os aprimoramentos técnicos da Colorblind Web Page Filter, eis o que é possível encontrar na própria página da ferramenta:

  • Filtros de imagens melhorados. Aplicar os filtros de simulação das deficiências cromáticas em imagens é muito mais complicado/custoso que em HTML/CSS, mas houve aprimoramentos nesta área e a renderização do comparativo está muito mais rápida que a versão anterior.
  • Filtros aplicados em todas as imagens. Ainda sobre o aprimoramento relativo a imagens, antes somente imagens no formato GIF entravam na simulação, então era preciso converter as não-GIF para depois aplicar os filtros, o que resultava em perda de qualidade. Agora, todos os tipos de imagens são aceitos.
  • Aprimoramento em folhas de estilos. Os filtros relacionados a CSS estão muito melhores, garantindo mais abrangência, qualidade e fidelidade nas simulações realizadas.

256 cores seguras para web

No site da Colorblind Web Page Filter é possível encontrar algumas opções para “filtrar” como se deseja que a simulação da deficiência cromática seja apresentada. O mais importante é definir que tipo de deficiência cromática se quer simular dentre as disponíveis — muitas delas a maioria de nós sequer ouviu falar.

Depois de décadas de evolução no desenvolvimento web, ainda pode pairar a dúvida sobre o motivo de existirem as “256 cores seguras para web”, mesmo diante de tantos avanços tecnológicos. Com o passar dos anos, com a consolidação da internet na vida das pessoas, não seria possível que alguns indivíduos utilizassem equipamentos tão antigos a ponto de nós, desenvolvedores web, sermos obrigados a garantir compatibilidade com máquinas obsoletas a esse ponto!

E é usando a Colorblind Web Page Filter que a ficha pode cair: na verdade, as tais 256 cores seguras para web — que desenvolvedores mancebos provavelmente desconhecem — ainda existem em função das pessoas que apresentam cegueiras de cores diversas. Como é possível simular na ferramenta, dependendo de qual deficiência se escolhe, a mesma página é exibida com cores completamente diferentes. Então, usando as cores seguras, é praticamente garantido que mesmo as pessoas com deficiência cromática visualizarão o site exatamente conforme foi desenvolvido com essas cores.

Evidentemente, isso não é um estímulo e/ou incentivo para todos voltarmos ao estado de cores na web dos anos 90; é somente uma reflexão sobre o legado de cores que muitos de nós vivemos e, quem sabe, (fora as limitações técnicas) não entendíamos bem os motivos.

Conclusão sobre a Colorblind Web Page Filter

Na versão anterior da Colorblind Web Page Filter, o número de filtros era maior. Esta diminuição provavelmente teve seus motivos — que, arriscando um palpite, relaciona-se aos que eram muito mais usados e/ou que refletem as principais deficiências ao enxergar cores que pessoas que acessam a web são afetadas — e a ferramenta ainda está em desenvolvimento, portanto muito mais possibilidades devem surgir no futuro.

Atualmente, as “256 cores seguras para web” não são mais uma limitação tecnológica, mas, desde o século passado, os melhores desenvolvedores e designs já tinham aprendido que o mais importante não são as cores usadas, mas o contraste entre elas.

Quase 10% das pessoas têm algum tipo de cegueira de cores. Investir algum tempo de projeto para analisar como um site se apresenta para esta parcela de indivíduos e, se preciso, realizar algumas modificações pontuais para garantir uma adesão maior ao produto/serviço, não parece ser lá uma ideia tão ruim.

Usamos cookies para melhorar sua experiência e para ajudar a entender como nosso site é usado. Ao utilizar este site, você aceita o uso de cookies. Consulte nossa política de privacidade para obter mais informações.