Como este tema funciona na sua empresa
Acessibilidade é raramente considerada — cores são "escolhe o que fica bonito". Se empresa não tem pessoa com deficiência visual, tópico desaparece do radar. Problema emerge quando cliente ou colaborador reclama que não consegue ler dashboard. Solução simples: paleta pré-aprovada com 4 a 5 cores que atendem WCAG AA.
Começam a considerar acessibilidade; pode haver colaborador com deficiência. Desafio é balancear identidade visual com acessibilidade. Guia de cores que cumpre WCAG AA e funciona com marca corporate é investimento necessário.
Acessibilidade é obrigação formal — política, compliance, possível exposição legal. Aplicar padrão em centenas de dashboards exige design system com paletas acessíveis e validação automatizada. Ferramenta de BI deve garantir contraste mínimo.
Paleta e acessibilidade em dashboards significam usar cores que comunicam informação (verde=bom, vermelho=alerta) com contraste suficiente para pessoas com deficiência visual — porque 8% dos homens têm daltonismo e acessibilidade é direito, não opção[1].
Por que acessibilidade em cores importa
Daltonismo é comum: 8% dos homens têm visão cromática deficiente; 0.5% das mulheres. Tipos principais: deuteranopia (não diferencia vermelho-verde), protanopia (também vermelho-verde), tritanopia (não diferencia azul-amarelo). Dashboard que depende de cor vermelha para alertar é inacessível para 8% do público.
Além de deficiência, contraste inadequado prejudica também em ambientes com pouca luz, telões de apresentação, impressão em preto e branco, ou telas antigas. Acessibilidade não é para 8% — beneficia 100%.
Paleta de cores com significado claro
Cores devem comunicar status ou categoria. Padrão corporativo internacional:
Verde: meta atingida, status OK, progresso bom. Vermelho: atenção, alerta, problema. Amarelo: em progresso, atenção moderada. Cinza: neutro, indisponível, não aplicável. Azul: informação, contexto.
Nunca codificar apenas por cor. Sempre adicionar símbolo (?, ?, !), ícone, padrão visual ou número. Pessoa com daltonismo consegue ver símbolo mesmo sem diferenciar cor. Exemplo: ? verde é melhor que verde sozinho.
WCAG AA: contraste mínimo obrigatório
WCAG (Web Content Accessibility Guidelines) define contraste mínimo de 4.5:1 para texto em background, 3:1 para gráficos e elementos de UI. Proporção 4.5:1 significa pixel claro vs pixel escuro — razão de luminância, não visual.
Preto (#000000) em branco (#FFFFFF) tem contraste 21:1 (máximo). Verde claro em branco pode ter apenas 2:1 (inadequado). Ferramentas como WebAIM Contrast Checker calculam proporção automaticamente — usar sempre antes de publicar.
Testando com simulador de daltonismo
Color Oracle (ferramenta gratuita) simula como dashboard aparece para pessoa com daltonismo. Verifica se padrão de cores mantém legibilidade. Teste em cada tipo: deuteranopia (vermelho-verde), protanopia (também vermelho-verde), tritanopia (azul-amarelo). Se dashboard fica ilegível em simulação, não usar paleta.
Usar paleta pré-aprovada: 5 cores com hex já validadas em contraste. Nunca vermelho-verde juntos sem diferenciação. Testar uma vez com Color Oracle.
Guia de paleta que cumpre WCAG AA. Derivar cores acessíveis da marca corporate. Revisor valida contraste + teste de daltonismo antes de publicar. Treinamento em "por quê cores importam".
Design system com 8-15 cores acessíveis (todas já validadas). Componentes de BI herdam cores do sistema. Validação automatizada em pipeline: nenhum dashboard publica sem passar por verificação de contraste.
Fontes acessíveis
Sans-serif (Helvetica, Arial, Open Sans) são mais legíveis que serif. Mínimo 12pt para leitura confortável; 10pt só se espaço for crítico. Evitar italic pesado ou extra-light — reduzem contraste. Linha negra fina em fundo cinza claro fica ilegível.
Limitar paleta: menos é mais
Paleta com 5 a 7 cores máximo. Acima disso, pessoas perdem capacidade de diferenciar (mesmo com visão cromática normal). Cada cor adicional exigir mais espaço mental. Consistência: mesma cor sempre significa mesma coisa em todos os dashboards — verde é sempre bom, vermelho é sempre alerta.
Casos de uso: paleta em contextos diferentes
Dashboard de operação (status de máquinas): verde=ok, vermelho=parado, amarelo=advertência. Nada além disso. Dashboard financeiro (execução de meta): verde=acima, amarelo=próximo, vermelho=abaixo. Mas dashboard comparativo entre regiões não deve usar verde/vermelho — pode confundir com bom/ruim. Usar neutros (azul, laranja, roxo) ou padrões (sólido, com padrão).
Sinais de que sua paleta de cores não é acessível
- Colaborador com daltonismo reclamou que não consegue diferenciar informações no dashboard.
- Único meio de comunicação é cor — nenhum símbolo, ícone, padrão visual alternativo.
- Vermelhos, verdes e azuis muito próximos em tonalidade (confundem mesmo em visão normal).
- Paleta não documentada — cada criador escolhe cores diferentes para mesma situação.
- Dashboard impresso em preto e branco fica ilegível (fontes muito claras).
- Teste de contraste nunca foi feito (usar WebAIM e verificar).
- Cores não testadas com simulador de daltonismo (Color Oracle).
Caminhos para implementar paleta acessível
Acessibilidade em cores é implementável em qualquer porte — começa com documentação, valida com ferramenta, aplica em componentes.
Documentar 5-7 cores com hex codes já testadas. Revisor antes de publicar valida contraste (WebAIM) e testa com Color Oracle. Investimento pequeno, manutenção mínima.
- Tempo necessário: 2 a 4 horas para criar guia + testar
- Efetividade: elimina 90% dos problemas de acessibilidade
- Faz sentido quando: equipe pequena com designer ou analista
- Ferramentas: WebAIM Contrast Checker (online, gratuita), Color Oracle (gratuita)
Componentes de BI com paletas acessíveis pré-definidas. Ferramenta valida contraste automaticamente antes de publicar. Não precisa pensar — sistema garante acessibilidade.
- Ferramentas: Tableau, Power BI, Looker com design systems integrados
- Vantagem: automação reduz erros; validação transparente
- Faz sentido quando: equipe usa ferramenta que suporta design systems
- Investimento: inicial em setup; depois zero overhead
Precisa de ajuda para definir paleta acessível na sua empresa?
Se acessibilidade em dashboards é prioridade, o oHub conecta você gratuitamente a especialistas em design e BI. Descreva sua necessidade — auditar paletas existentes, criar guia, implementar design system — e receba propostas sem compromisso.
Encontrar fornecedores de TI no oHub
Sem custo, sem compromisso. Você recebe propostas e decide se e com quem avançar.
Perguntas frequentes
Como escolher cores para um dashboard?
Cores devem ter significado (verde=bom, vermelho=alerta, amarelo=em progresso). Máximo 5-7 cores por dashboard. Sempre testar contraste com WebAIM (mínimo 4.5:1 para texto). Testar com Color Oracle para simular daltonismo. Nunca codificar informação apenas por cor — adicionar símbolo ou ícone.
WCAG AA é obrigatório?
WCAG AA é padrão internacional e obrigatório para sites governamentais e grandes corporações em muitas jurisdições. Para empresa privada, é melhor prática — direito, inclusão e também reduz risco legal. Contraste 4.5:1 para texto, 3:1 para gráficos.
Como lidar com daltonismo em dashboards?
Nunca usar cor como único indicador. Verde + ?, Vermelho + ?, Amarelo + !. Testar sempre com Color Oracle. Evitar combinações vermelho-verde, azul-amarelo sem diferenciação clara. Adicionar padrões visuais (sólido, tracejado, pontilhado) para reforçar diferenciação.
Qual ferramenta testo contraste de cores?
WebAIM Contrast Checker (webaim.org/resources/contrastchecker) — online, gratuita, calcula proporção exata. Color Oracle (colororacle.org) — simula como cores aparecem para pessoa com daltonismo. Ambas gratuitas.
Paleta limitada não reduz expressão visual?
Não. Paleta com 5-7 cores bem escolhidas é mais profissional que 20 cores aleatórias. Padrões visuais (sólido, tracejado, padrão) adicionam dimensão sem cores. Tipografia, ícones e layout fazem diferença maior que quantidade de cores.
Como adaptar marca corporate para dashboard acessível?
Usar ferramenta de contraste e testar cores de marca. Se não passam em WCAG AA, derivar versão acessível — ajustar tom, saturação ou brilho até passar. Documentar versão acessível; usar em dashboards. Marca original fica para marketing/presentations.