Este artigo descreve por que e como implementamos a simulação de deficiência de visão de cores no DevTools e no Blink Renderer.
Plano de fundo: contraste de cores ruim
Texto com baixo contraste é o problema de acessibilidade mais comum detectável automaticamente na Web.
De acordo com a análise de acessibilidade da WebAIM sobre os 1 milhão de sites mais acessados, mais de 86% das páginas iniciais têm baixo contraste. Em média, cada página inicial tem 36 instâncias distintas de texto de baixo contraste.
Como usar o DevTools para encontrar, entender e corrigir problemas de contraste
O Chrome DevTools pode ajudar desenvolvedores e designers a melhorar o contraste e escolher esquemas de cores mais acessíveis para apps da Web:
- A dica do modo de inspeção que aparece na parte de cima da página da Web mostra a taxa de contraste dos elementos de texto.
- O seletor de cores do DevTools indica proporções de contraste inadequadas para elementos de texto, mostra a linha de contraste recomendada para ajudar a selecionar manualmente cores melhores e pode até sugerir cores acessíveis.
- O painel "CSS Overview" e o relatório de auditoria de acessibilidade do Lighthouse listam elementos de texto de baixo contraste encontrados na página.
Recentemente, adicionamos uma nova ferramenta a essa lista, e ela é um pouco diferente das outras. As ferramentas acima se concentram principalmente em exibir informações sobre a proporção de contraste e oferecer opções para corrigi-la. Percebemos que o DevTools ainda não tinha uma maneira de os desenvolvedores entenderem melhor esse espaço de problemas. Para resolver esse problema, implementamos a simulação de deficiência visual na guia "Renderização" das Ferramentas do desenvolvedor.
No Puppeteer, a nova API page.emulateVisionDeficiency(type) permite ativar essas simulações de forma programática.
Deficiências na visão das cores
Cerca de 1 em cada 20 pessoas (link em inglês) apresenta deficiência na percepção de cores, também conhecida pelo termo "daltonismo". Isso dificulta a diferenciação das cores, o que pode aumentar os problemas de contraste.