Cores de semáforos bonitas e acessíveis

author
3 minutes, 46 seconds Read

Todos as usam: Verde, amarelo (ou laranja), e vermelho. Nós os usamos na visualização de dados, os usamos em botões, colorimos textos e ícones com eles e os colocamos em alertas. Eles são frequentemente usados em momentos cruciais, quando estamos anunciando sucesso, ou dando más notícias. Também abusamos deles, usando-os para chamar a atenção onde não são relevantes. O que não fazemos, demasiadas vezes, é torná-los acessíveis.

Uma minoria significativa de pessoas é daltônica, e a maioria delas tem daltonismo vermelho-verde. Desde 2011 tive que resolver para acessibilidade de cores em interações importantes, tais como alertas para sinais vitais de pacientes, qualidade do atendimento ao paciente, status do servidor na nuvem ou análise de vendas executiva. Aqui estão algumas dicas de acessibilidade que peguei pelo caminho, assim como meu template pessoal para uma paleta de cores de tráfego utilizável e acessível.

Você pode projetar uma bela paleta de cores amigável às cegas, mas não custa nada reforçar a mensagem. Em vez de mudar o texto para vermelho ou verde, coloque um ícone vermelho ou verde de forma diferente ao lado do texto. Dessa forma, mesmo que você não tenha controle sobre sua paleta de cores, ou o gráfico tenha sido impresso em preto e branco, ou seu usuário veja apenas em cinza, você fez seu ponto.

Case in point: Excel. O Excel oferece ícones em cores de semáforo para ajudar a contar a sua história de dados. Certifique-se de usar ícones de formatos diferentes, bem como cores diferentes! Veja porque:

>

Desktop Excel, Office 2013. Preste atenção aos círculos vermelho e verde – você poderia distingui-los facilmente? A Microsoft resolveu este problema em versões posteriores.

Deuteranopia e protanopia são dois tipos comuns de daltonismo vermelho-verde. Testar suas cores contra elas irá otimizar para a maioria dos seus usuários, mas ícones ajudam a fechar o negócio.

Não confie em paletas de cores predefinidas

Existem muitos frameworks e placas de caldeira extremamente úteis online. Cada um satisfaz muitas necessidades, mas nem todos tiveram tempo de otimizar suas cores para o daltonismo.

>

>

>

Exemplos de temas de cores populares predefinidas que não verificaram a acessibilidade no uso de cores. (Ou, “Por que não usar laranja”)

A pergunta mais importante ao olhar para os seus vermelhos, verdes, laranjas e amarelos é: “Será que os meus utilizadores reconhecerão esta cor quando a virem sozinhos? Não confie nas pessoas que criaram sua estrutura para ter pensado nisso. Verifique você mesmo.

Como você faz isso, você pergunta? Durante muitos anos a única solução que encontrei para testes foi o Photoshop da Adobe, que oferecia vistas de protanopia e deuteranopia de tudo o que eu estava a criar. As opções estão em View → Proof Setup (ver imagem abaixo).

>

>

>

>

>

>

Screenshot: encontrando as pré-visualizações de daltonismo no Adobe Photoshop.

Agora o Corblindor Coblis (Color Blindor Blind Simulator) tornou-se a minha ferramenta de go-to. Basta fazer uma rápida captura de tela do seu trabalho, e ver como ele se parece com muitos tipos diferentes de daltonismo.

Planeie com um modelo de cor

Fiz muito trabalho de visualização de dados de cor ao longo dos anos, e surgiu um padrão que eu acho útil. Estou oferecendo isso aqui, no interesse de tornar os dados mais utilizáveis. Eu recomendo fortemente que se considere esta abordagem quando você estiver desenvolvendo uma paleta de cores de marca.

Notem como claro vs. escuro e quente vs. frio diferenciam o vermelho do verde. O amarelo deve ser significativamente mais claro que o vermelho ou verde!

Aqui estão as principais orientações:

  • Use uma tonalidade clara, média e escura. O seu amarelo deve ser a sua tonalidade clara.
  • Utilize um verde quente e um vermelho frio, ou um verde frio e um vermelho quente. Apenas não tenha ambos frios ou ambos quentes.
  • Não use um laranja. Por ser muito mais leve, usar amarelo em vez de laranja faz com que seja muito menos provável que a sua cor de “aviso” entre em conflito com o seu “sucesso” verde para colorir os usuários cegos, ou se pareça muito com o seu “problema sério” (erros, por exemplo) vermelho.

É isso! Obrigado por ler. Vá em frente e divirta-se contando boas histórias com seus dados.

Similar Posts

Deixe uma resposta

O seu endereço de email não será publicado.