Segunda-feira, reunião comercial na Aurora Móveis, varejista fictícia criada para este artigo. No painel, duas células mostram o mesmo número: 12%. Uma está em verde; a outra, em vermelho. Para quem distingue bem essas cores, o Sul vai bem e o Norte preocupa. Para quem não distingue, pode parecer empate.
A W3C explica, no critério sobre uso de cor, que a cor não deve ser o único meio visual de transmitir uma informação. Verde e vermelho podem continuar no painel, desde que o significado também apareça de outra forma, como texto ou formato.
Mesmo número, sentidos opostos
Nos dados inventados da Aurora, cada região tinha meta de R$ 100 mil em março. O Sul faturou R$ 112 mil; o Norte, R$ 88 mil. Cada uma ficou a R$ 12 mil da meta, em direções contrárias, o que dá 12% nos dois casos. Só a cor carregava essa direção.
| Região | Antes | Depois |
|---|---|---|
| Sul | 12% em verde | Receita de março: R$ 112 mil, 12% acima da meta de R$ 100 mil |
| Norte | 12% em vermelho | Receita de março: R$ 88 mil, 12% abaixo da meta de R$ 100 mil |
A prova das duas células
Para auditar o painel, proponho um método próprio, simples de repetir:
- Escolha duas células com o mesmo valor e sentidos opostos. Se o painel não tiver esse par, crie-o com dados de teste.
- Ignore a cor e as legendas externas, lendo apenas o que está escrito em cada célula.
- Dê um ponto para cada item presente: rótulo, unidade, comparação e sentido.
- Redesenhe até alcançar oito pontos nas duas células somadas. Só depois devolva a cor, como reforço.
Na Aurora, a versão antiga soma dois pontos de oito: cada célula tem apenas a unidade, o sinal de porcentagem. A nova soma oito, porque o texto diz o que foi medido, em que unidade, contra qual referência e em que direção. É uma conferência de conteúdo, não uma nota de acessibilidade.
Atenção às métricas em que subir é ruim. Um custo 12% acima do teto merece essas palavras exatas, pois um simples sinal de mais não avisa se a notícia é boa.
Por que a escala de cinza não basta
Passar a tela para tons de cinza ajuda a encontrar problemas, mas não comprova conformidade. Se verde e vermelho virarem cinzas diferentes, o leitor percebe que as células diferem, sem saber qual delas está acima da meta. E um texto que parece legível ainda não teve seu contraste medido.
Esse cuidado pesa no redesenho, porque acrescentar texto sobre fundo colorido pode criar outra falha. A orientação sobre contraste mínimo pede, em geral, 4,5:1 para texto comum e 3:1 para texto grande, com exceções como logotipos e componentes inativos. Meça cada par de texto e fundo nos estados reais do painel.
O que pedir no próximo briefing
- Toda célula de status traz rótulo, unidade, comparação e sentido por escrito.
- A prova das duas células acompanha a entrega, com o par usado e a pontuação.
- Os pares de texto e fundo chegam com o contraste medido.
Até onde isso vai
A Aurora é um caso ilustrativo: não houve teste com pessoas nem medição de resultado, e nada aqui indica ganho de vendas. O método cobre apenas uma parte do problema. A própria W3C observa que o critério de cor trata da percepção de cor e remete outras formas de percepção, como o acesso programático, à Diretriz 1.3. Antes de declarar o painel conforme, faça uma avaliação completa. O que a prova entrega é mais modesto e útil: impedir que 12% e 12% pareçam a mesma notícia.
Para aprofundar
- A Ciência do ROI: Calculando o Retorno Real de Campanhas de Marketing
- O Que Significa CX? Entenda o Significado
Sinal / Consumo & Inteligência. Reportagem explicativa produzida com auxílio de IA e revisão editorial automatizada.