Como repensamos nossa paleta de cores e a tornamos acessível
O processo de criação de paleta cromática não é preto no branco
Atualmente na Senior nós já possuímos um Design System que amadurece dia após dia, produto que é evoluído pelo nosso DesignOps (falaremos dele em um outro artigo). Recentemente chegou a vez de revisitar a paleta de cores como parte da evolução contínua do nosso Design System.
A ideia inicial era entender se as cores estavam alinhadas com os princípios e valores da empresa e, para alguns “deixá-las mais bonitas”. Hoje todo novo componente que vai para o nosso Design System tem por obrigação seguir a WCAG 2.1, tornando-o acessível, coisa que não poderia ser diferente com a nossa paleta de cores, não é mesmo?
A antiga paleta
Antes de mais nada, vamos entender um pouco mais sobre esta antiga paleta.
Ela foi criada há praticamente 2 anos atrás pelo primeiro time de Design da Senior, momento em que ainda não se tinha um Design System totalmente constituído. Mesmo assim, juntamente com o time de Marketing ela foi desenvolvida seguindo os padrões da marca daquela época e sendo a base de todos os nossos produtos até o momento.
Sabemos que uma marca sempre se atualiza ao longo do tempo, seja para estar mais próxima do seu público alvo ou até mesmo para estar mais condizente com as tendências de mercado. Sendo assim, não faria sentido a nossa paleta continuar a mesma para sempre, certo?
Vejam como a marca da Senior mudou ao longo dos tempos
E atualmente a logo é esta:
Mas digamos que não foi somente este o motivo que nos fez revisitarmos ela, a partir de agora, vamos começar a olhar mais detalhadamente para a nossa paleta e compreender melhor seus pontos de melhoria.
Baixa acessibilidade
Procurando saber em qual nível de acessibilidade estava a nossa paleta, de acordo com o WCAG 2.1, começamos a realizar uma série de testes de contraste e aplicação de nossas cores, que já posso adiantar que não teve bons resultados.
Como parte de nosso discurso, queremos sempre proporcionar uma boa experiência em nossos produtos, tendo isso em mente, não poderíamos deixar a paleta desta forma, estávamos praticamente ignorando nossos usuários que possuem alguma deficiência visual.
Em um teste rápido com um PM aqui da Senior que é daltônico, percebemos que ele não conseguia diferenciar algumas barras nos gráficos. Agora imaginem a dificuldade dele no dia a dia para utilizar dashboards e comparar informações, já que aqui usamos os produtos que criamos.
Esta imagem abaixo exemplifica como ele visualizava nossos gráficos
Inconsistência entre as cores
Esta talvez seja mais voltada para nós designers, usamos diariamente a nossa paleta em nossos mockups, diariamente também podíamos encontrar algumas inconsistências nas cores, por exemplo:
Nesta imagem é possível visualizar como a escala de cinza acaba perdendo a sua continuidade e consistência no gradiente dela mesma. As cores variavam de quente para frio ao longo dela, parece algo bobo não é mesmo? Mas na verdade não é, no uso diário, é visível que algumas cores não se conversavam e dificultavam o uso, principalmente em termos de contraste.
Cores descontinuadas
Quando disponibilizamos uma paleta de cores, esperamos que toda ela possa ser utilizada, certo? Então, na paleta antiga haviam cores de algumas linhas de produto que deveriam ser ignoradas, por estarem desatualizadas e não seguirem mais com o visual do novo branding proposto pelo marketing (confesso que quando entrei aqui na Senior, usei várias vezes aquelas cores sem querer, não sabendo dessa informação)
Cores visualmente pesadas e de difícil aplicação
Chegamos agora a um assunto um pouco mais polêmico, pois haviam vários lovers destas cores dentro da Senior (inclusive designers). Um dos primeiros questionamentos que nos fizemos foi se estas cores estavam alinhadas com os valores da empresa, e podemos dizer que não estavam.
Mas deixando um pouco de lado esse conceito do que é belo (o Belo tem esse nome mas….), se tratando da aplicação dessas cores, tínhamos disponíveis 19 na paleta, destas, 4 eram “proibidas” de usar e pelo menos outras 5 eram impossíveis de se trabalhar com um contraste minimamente acessível.
Hora de mudar a cor do arco iris
Depois de toda essa introdução de como era a paleta antiga, vamos agora começar a falar de como projetamos a nova.
Com todos os problemas bem definidos, sabíamos agora o que precisávamos resolver.
Começamos então por alinhar as cores com os 4 valores da Senior, são eles: Cliente, Simplicidade, Autonomia e Inovação. Destes, focamos em dois que representam muito bem nosso Design System, sendo eles: Simplicidade e Inovação.
Baseado também na escala Manchester, criamos as nossas variações de cores para os diferentes níveis de prioridade.
O próximo passo foi definirmos a cor principal do sistema, antes era utilizado o azul da escala Manchester com o objetivo de transmitir confiança nas ações. Juntamente com o Marketing, entendemos que o uso do azul estava desalinhado com o branding atual da Senior e precisávamos trazer a marca para dentro dos produtos.
O Marketing disponibilizava uma cor para cada um dos quatro segmentos, como a nossa plataforma é a mesma para cada um deles, decidimos por criar uma cor comum através da união de todos os segmentos.
Ah, esta nova cor foi criada a partir da união dos segmentos e ajustada para ser acessível.
Com as cores de níveis de prioridade e a cor principal definida, partimos para a correção da escala de cinza. Criamos um novo tom e tornamos a variação entre os níveis suave e consistente.
Após concluirmos a escala de cinza, precisávamos melhorar as cores para Data Visualization.
Data Visualization é uma forma acessível de enxergar dados e entender resultados, identificar tendências e reconhecer padrões nos dados.
Fizemos alguns estudos e vários testes com as cores até chegarmos no resultado final. Inicialmente pensávamos em tentar simplesmente corrigir a variação tonal das cores já existentes na paleta e ver a que resultado chegaríamos, porém vimos que seria necessário mais que isso para corrigir aquelas cores.
Uma das características das cores para Data Visualization é poderem se diferenciar entre elas para uma fácil leitura e comparação das informações em gráficos, por exemplo. Considerando agora as pessoas com algum tipo de daltonismo, utilizamos o plugin do Stark no Adobe Xd para simular estes diferentes tipos de daltonismo e ver como as cores se comportavam.
As 8 cores disponíveis na antiga paleta para este propósito também não possuíam um gradiente muito natural, o que gerava uma sensação de bagunça nas informações em gráficos e demais aplicações. Podemos ver nestes dois gradientes abaixo como um parece ser mais natural que o outro.
Isso acontece pois somos condicionados por gradientes que vemos ao nosso redor e na natureza, como nos exemplos abaixo:
Também é possível observarmos em outros cenários como há gradientes de cores naturais.
Criamos então um gradiente natural partindo do amarelo claro ao roxo escuro, estas cores se demonstram mais contrastantes entre si e com maior grau de visibilidade e diferenciação para usuários daltônicos. Neste gradiente, definimos 6 cores deste gradiente para usarmos na nossa paleta, conforme podem conferir abaixo:
Show, temos agora nossa paleta praticamente pronta, até aqui a gente já estava nível AA no WCAG 2.1, mas queríamos buscar o nível AAA.
Nível A: o site atinge um nível mínimo e básico de acessibilidade. Para chegar a esse nível, todos os Critérios de sucesso de Nível A precisam ser cumpridos.
Nível AA: é o nível ideal que deve ser alcançado, no qual o site atinge um nível superior de acessibilidade, para que seja acessível à maioria das pessoas, em grande parte das situações e usando a maioria das tecnologias. Para chegar a esse nível, todos os Critérios de sucesso de Nível A e Nível AA precisam ser cumpridos.
Nível AAA: o site atinge um nível muito elevado de acessibilidade. Para atender a esse nível, todos os Critérios de sucesso de Nível A, Nível AA e Nível AAA precisam ser cumpridos.
Para melhorar ainda mais a acessibilidade da paleta, adicionamos mais um nível nas escalas de toda a paleta, criando assim o nível que chamamos de Alto Contrate.
Legal, mas e como vocês usam esta cor?
Simples, definimos uma forma de acionar este modo Alto Contraste na plataforma, adicionando ao header um botão que aciona este modo. Funciona conforme o exemplo abaixo, por padrão a paleta proporciona nível AA de contraste e ao acionar o modo contraste, passamos a proporcionar nível AAA.
E isso é tudo pessoal?
Na verdade não, sabemos que temos muita coisa pela frente ainda, depois de projetarmos toda a paleta de cores, chegou o momento de desenvolvê-la e aplicar nos nossos produtos. E quais são os próximos passos para isso?
- Implementar o botão no Header da plataforma para alterar o contraste.
- Criar variáveis reutilizáveis para as cores e suas variações.
- Alterar todos os componentes/layouts para terem suporte ao modo contraste
- Tomar muito café
- …
Tem um trabalhinho ai né, mas cada esforço compensa quando sabemos que isso tornará nossos produtos cada vez mais acessíveis.
Se ficou com alguma dúvida ou quiser simplesmente trocar uma ideia sobre o assunto, deixe seu comentário neste artigo. Ah e se gostou, deixe seu 👏.
