Um dashboard precisa de cores para superfícies, texto, dados e estados. Aqui você encontra três combinações prontas, com papéis definidos e os pares de contraste que realmente aparecem na prévia.
Para tabelas e indicadores, comece pelas superfícies e pelo texto. Reserve as cores de estado para o mesmo significado em todas as telas. Para comparar categorias, use uma família separada de cores e identifique cada série por nome.
Combinações prontas para copiar
Clique em uma amostra para copiar seu HEX, ou copie a paleta inteira e o CSS. As prévias são exemplos visuais, com cores opacas e dados ilustrativos.
01
Painel claro com azul de destaque
Para relatórios com bastante texto e tabelas. O azul marca a ação principal; verde e vermelho ficam reservados aos estados identificados por texto.
Quatro cores para grupos sem ordem natural. O azul identifica a série Direto. Na prévia, os rótulos e números acompanham as barras; eles continuam necessários se alguma diferença de cor não for percebida.
As taxas comparam apenas os dois valores indicados. Para texto normal, a referência AA é 4,5:1; para texto grande, 3:1. As marcas gráficas essenciais usam outra avaliação, em geral 3:1 contra cores adjacentes. Isso não certifica o layout completo nem todos os pares da paleta.
Confira no seu projeto o tamanho e o peso da fonte, o foco e os estados de interação. Consulte os critérios do W3C para contraste de texto e contraste não textual.
Separe categoria, quantidade e estado
Uma cor de categoria identifica um grupo, como um canal de aquisição. Uma escala de tons representa uma ordem, como valores baixos e altos. Uma cor de estado acompanha uma mensagem, como “falha” ou “concluído”. Usar a mesma cor para as três funções pode criar interpretações erradas.
O terceiro exemplo é categórico. Não o use como uma escala numérica sequencial. Para valores ordenados, crie uma escala a partir do azul e mantenha a legenda visível. Para desvios em relação a uma meta, avalie duas famílias de cores com um centro neutro.
Confira o dashboard no tamanho real
Teste texto pequeno, números, rótulos e mensagens sobre a superfície em que serão exibidos.
Nos gráficos, compare as marcas necessárias à leitura com o fundo e com as marcas adjacentes. As taxas abaixo não avaliam todos os encontros possíveis entre cores.
Use texto, símbolos ou padrões para acompanhar os estados. Uma combinação de verde e vermelho, sozinha, pode esconder informações.
Verifique foco do teclado, seleção e estados ao passar o cursor depois de implementar o painel.
As cores estão em sRGB. A prévia demonstra os papéis, sem reproduzir um produto ou representar estatísticas reais. Transparências, imagens de fundo e sobreposições exigem novos testes.