Cores de sistema precisam funcionar bem juntas: no Chrome para Android, o contraste falha no modo escuro

A recente descoberta de falhas de contraste entre cores de sistema no Chrome para Android, especificamente a combinação de HighlightText com Highlight, levanta um ponto crítico para designers e desenvolvedores. O problema ocorre no modo escuro, onde a relação de contraste é de apenas 1,98:1, muito abaixo dos limites de acessibilidade estabelecidos pelas WCAG (Web Content Accessibility Guidelines). Este tipo de falha compromete a legibilidade de elementos interativos, como botões ativos, e impacta diretamente a usabilidade da interface. O System Color Study foi criado para mapear e comparar como essas cores são renderizadas e combinadas em diferentes navegadores, sistemas operacionais e preferências de usuário, avaliando cada par contra múltiplos níveis de contraste da WCAG.

A ideia por trás das cores de sistema CSS é permitir que componentes web se adaptem às preferências do usuário e ao sistema operacional, resultando em interfaces que se integram melhor à plataforma. Nomes como Canvas, CanvasText, ButtonText, ButtonFace, FieldText e HighlightText com Highlight sugerem uma harmonia funcional. No entanto, a prática mostra que nem sempre a intenção se traduz em legibilidade. A ferramenta System Color Study analisa os valores sRGB hex resolvidos de cada cor e, mais importante, o contraste resultante de seus pareamentos “pretendidos”. Isso é crucial para identificar onde as falhas acontecem, usando indicadores visuais (cores de fundo e ícones) para sinalizar se os pares passam, parcialmente ou falham totalmente nos critérios de contraste da WCAG.

O que a notícia de 13 de novembro de 2026 ilustra é a materialização de algo que o CEVIU já abordava de forma mais conceitual. Em 15 de setembro de 2026, a matéria “Desmistificando a Acessibilidade de Cores no Design Digital” argumentava que a acessibilidade de uma cor depende inteiramente da sua interação com outra e do contraste gerado, e não de uma cor isolada. Agora, vemos um exemplo concreto e mensurável dessa falha em um ambiente real (Chrome no Android) e a criação de uma ferramenta (System Color Study) que busca justamente testar e catalogar essas interações entre cores de sistema para prevenir problemas de contraste.

Outro ponto de contato é a discussão sobre o modo escuro. Em 3 de julho de 2026, a matéria “Como implementar o modo escuro respeitando as preferências do usuário e os padrões da web” já tocava na complexidade de implementar o modo escuro corretamente, indo além da simples inversão de cores. O problema atual com o Chrome no Android mostra que mesmo quando se usam cores de sistema, a implementação do modo escuro ainda pode gerar falhas críticas de acessibilidade, reforçando a necessidade de validação rigorosa.

Para designers digitais e profissionais de UX/UI, esta descoberta ressalta que depender apenas dos nomes de cores de sistema pode ser insuficiente e arriscado para a acessibilidade. A confiança de que pares como HighlightText e Highlight funcionarão harmoniosamente por padrão é quebrada. Isso significa que designers precisam ir além da escolha semântica de cores e validar o contraste real em diferentes contextos (navegadores, sistemas operacionais, modos claro/escuro, modos de alto contraste) para garantir que interfaces sejam de fato utilizáveis por todos.

A ferramenta System Color Study é uma contribuição valiosa, transformando um problema abstrato em um recurso prático. Ela oferece um ponto de partida para verificar a robustez de um sistema de design e serve como um lembrete de que a acessibilidade não é um recurso extra, mas um pilar fundamental que exige testes contínuos e atenção aos detalhes técnicos da renderização.