Paleta de cores mais
acessíveis para Fluency
Contexto 🦉
Fluency Academy é uma edtech (empresa de tecnologia e educação) que participei da equipe de Brand & Design. A escola na época tinha no seu catálogo 8 cursos de idiomas, alemão, coreano, espanhol, francês, inglês, italiano, japonês e mandarim. Fora estes, em serviços sociais, pontuais, também existiam cursos de português.
Antes de realizar este estudo, notou-se que as cores utilizadas para criar peças visuais na Fluency Academy não alcançavam o contraste ideal, tanto em relação aos textos quanto aos elementos gráficos presentes nos sites e nas mídias sociais.
Cores antigas espanhol
.png)
Cores novas espanhol
Pesquisa 🕵️♀️
Num primeiro momento foi consultado o guia de boas práticas de acessibilidade dentro da web da WCAG (Web Content Accessibility Guidelines), especificamente o de análise de contraste ideal entre cores.
Além disso, uma relação de cores por idiomas também foi feita com a paleta da Fluency. As cores foram separadas entre primárias (as que eram mais presentes no material gráfico) e secundárias (cores auxiliares).
A tabela representa o número de vezes em que as cores estavam presentes em paletas específicas de cada idioma. Percebe-se que algumas estavam sendo utilizadas em praticamente todos os idiomas, como a vermelho, que era presente nos oito idiomas, com exceção do português. Enquanto nas secundárias, cores utilizadas em apenas dois idiomas e o amarelo, de tom claro, criado para ser usado exclusivamente no mandarim.
Ideia 💡
Pensando na unidade entre quantidade de cores e idiomas, a ideia da nova paleta era de seguir com 8 cores primárias. Porém, a fim de garantir uma liberdade de aplicação maior e garantir o contraste ideal, também foram criadas dois tons mais claros e dois mais escuros para cada cor.
Para explicar brevemente o conceito de contraste ideal neste estudo, foram estabelecidos três categorias: combinações de cores não legíveis, combinações funcionais para textos curtos em grande escala e formas geométricas, e combinações funcionais para qualquer tipo de aplicação, desde grafismos até textos longos.
Para facilitar a compreensão, as cores serão identificadas como N1 para o tom mais claro, seguindo uma lógica até N5 para o tom mais escuro. Os cinco tons de cada cor são utilizados da seguinte maneira: combinações com uma diferença de quatro tons são ideais para textos longos, ou seja, N1 com N4 e N2 com N5. Combinações com uma diferença de três tons são ideais para títulos, subtítulos e ilustrações, por exemplo, N2 com N4 e N3 com N5. É importante ressaltar que essa regra não se aplica às combinações de N1 com N3, uma vez que, para tornar essa combinação legível, os tons mais claros de cada cor teriam que se aproximar demais do branco, o que não condiz com a ideia de ter um "tom mais claro que não seja branco".
Uso adequado de contraste
para textos curtos e elementos
Uso adequado de contraste
para textos longos e elementos
Uso adequado de contraste
para textos longos e elementos
Uso adequado de contraste
para textos curtos e elementos
Uso adequado de contraste
para textos curtos e elementos
Uso inadequado de contraste
para textos curtos e elementos
Estudo de cores ✍️
Além de ser adotado o uso monocromático para as oito cores principais, também foi criado um sistema de três cores para cada curso, visando personalizá-los ainda mais. Esse sistema garante que nenhuma combinação se repita, garantindo assim que todas as cores sejam utilizadas em quantidades equivalentes.
Antes de explorar a paleta de cada curso, o círculo cromático abaixo representa todas as cores possíveis dentro da nova paleta da Fluency. E assim como o uso monocromático, as cores análogas (cores ao lado) funcionam na mesma regrinha vista agora pouco. Por exemplo, a cor cinza no círculo pode ser combinada de forma semelhante com N2 e N5, seja no tom mais escuro de amarelo, verde ou qualquer outra cor. O quarto tom de azul também funciona bem com os primeiros tons de verde, azul, roxo e assim por diante.
Para facilitar a comunicação interna em projetos, a seguinte tabela foi montada. Assim como nomeamos N (de tom neutro) para a cor cinza, o G foi escolhido para verde, C para ciano, P para roxo, M para magenta, R para vermelho, O para laranja e Y para amarelo. As cores tem a inicial em inglês apenas pelo verde e vermelho em português começarem com V e amarelo e azul com A.
Cor por idioma 🌎
Ao abordar as combinações de cores para cada idioma, as três cores foram divididas em: uma cor primária (a mais proeminente) e duas cores secundárias. Além disso, considerou-se a representação da origem e região das línguas, criando grupos específicos para cada uma delas. Nesse contexto, as cores magenta, laranja e vermelho se tornaram fundamentais para esses grupos.
Observa-se que a maioria das bandeiras, com exceção da bandeira do Brasil, possui tons avermelhados. Para representar essa tonalidade nas línguas de origem germânica (alemão e inglês), optou-se por adotar o magenta. Já para as línguas neolatinas (espanhol, francês e italiano), escolheu-se o laranja. Por fim, para as línguas de origem sino-tibetanas (coreano, japonês e mandarim), definiu-se o vermelho como a cor representativa.
Além disso, é importante ressaltar que o uso da cor verde no francês e espanhol não se restringe apenas aos países mencionados (na bandeira) anteriormente, mas também abrange outros países que compartilham esses idiomas como línguas nativas. Isso inclui nações como México, Bolívia, Costa do Marfim, Camarões e diversos outros. Essa escolha de cor busca representar não apenas França e Espanha, mas também com a ampla diversidade de países onde o francês e o espanhol são falados como idiomas oficiais.
Finalizando😌
A seguir, apresentam-se algumas aplicações nas capas do podcast "Go Getter" para cada idioma, destacando cores e professores específicos de cada um.
Cores alemão
Cores espanhol
Cores inglês
Cores japonês
Cores coreano
Cores francês
Cores italiano
Cores mandarim
Feedbacks 🙃
Na etapa de seleção das cores, inicialmente a ideia era manter a regra de que todas as cores se combinassem entre si, não apenas as cores análogas. A primeira versão realmente proporcionava um bom contraste ideal, porém, devido às diferenças de matiz em relação às cores naturalmente mais claras presentes no círculo cromático (como o amarelo) e às cores mais escuras (como o azul), foi desafiador manter as oito cores com a mesma quantidade de branco ou preto, mantendo ao mesmo tempo um aspecto interessante.
Na versão em que todas as cores se combinavam, os tons mais claros resultavam em cores mais acinzentadas para o verde e azul, e o mesmo acontecia com tons mais escuros para amarelo e laranja. Levando isso em consideração e visando manter tanto o contraste ideal quanto o apelo visual das cores, decidiu-se alterar a abordagem para garantir que as combinações funcionassem com segurança apenas entre as cores análogas. Isso não significa que nenhuma cor que não seja análoga possa funcionar em outras combinações, mas essas são exceções. Com o objetivo de criar um sistema funcional em que qualquer pessoa se sinta confortável ao usá-lo, seguir o guia é a abordagem mais indicada para o criativo.