Vamos construir uma paleta de cores acessível?
Entenda como fazer uma paleta de cores incrível (e como fizemos isso no Bold, nosso design system próprio)
Escrito por Laís Eing, designer no Laboratório Bridge.
Sabe aquela sensação de alívio, quando você sabe que tem algo errado e finalmente descobre o que é? Foi assim quando percebemos por que nossas paletas de cores precisavam mudar. 🎨
Apesar de possuirmos uma identidade visual que representa o Bridge muito bem, sentimos que faltavam algumas coisas para essa identidade ficar completa.
3 passos para sua marca ter uma identidade visual forte
No desenvolvimento do Bold, nosso design system, pesquisamos e incluímos requisitos de acessibilidade AA, nível intermediário da WCAG – Web Content Accessibility Guidelines, ou Diretrizes de Acessibilidade para o Conteúdo Web.
Foi quando sentimos a inconsistência e falta de acessibilidade de nossas cores. Então, nos aprofundamos nas pesquisas e buscamos a melhor forma de construir uma paleta de cores acessível para o nosso design system.
Hoje, o Bold possui mais de 6 mil usuários, com quase 13 mil sessões realizadas. E é a partir da construção dele que formulamos essas dicas pra você.
Não importa se você está refazendo sua paleta de cores ou criando uma do zero, esse conteúdo vai te ajudar a fazer isso com acessibilidade 😉
#1 Tenha bases teóricas para seu desenvolvimento
Ninguém precisa nascer sabendo fazer tudo — ainda mais no design, uma área onde as mudanças e melhorias são a constante. Por isso, não tenha medo de buscar bases teóricas para o seu trabalho!
Na concepção das paletas de cores do Bold, os artigos que mais utilizamos foram esses dois:
- Re-approaching Color, por Kevyn Arnott
- Designing Systematic Colors, por Jeeyoung Jung
Com a ajuda desses conteúdos e a definição dos nossos objetivos (algo muito importante pra você ter em mente!), concordamos que as paletas de cores deveriam ser consistentes, acessíveis, e pudessem ser utilizadas de modo inverso, no famoso dark mode.
Tendo um conhecimento maior sobre o assunto, você não fica só torcendo para estar acertando na paleta: você terá informação suficiente pra saber que está arrasando!
Alguns links extras que também podem te ajudar:
- Curso Web Accessibility, fornecido pelo Google
- Inclusive components, um blog dedicado exclusivamente ao assunto
#2 Garanta o contraste ideal entre as cores
No desenvolvimento do Bold, utilizamos cores para representar status de elementos interativos, alertas, e enfatizar conteúdo visual e de texto. Ou seja, não escolhemos nossas cores só pelo valor estético. Elas também são utilizadas para informar.
E para que uma paleta de cores seja informativa para todos os usuários (portanto, acessível), ela precisa estar no contraste correto. Afinal, você não quer que as pessoas deixem de clicar nos seus itens por não conseguir enxergá-los, certo?
No Bold, cada paleta de cor foi dividida em 10 níveis para que pudéssemos ter uma gama de cores variada, que vai de pouca a muita luminosidade.
Começamos escolhendo a cor primária no nível 40, considerando um contraste maior que 4.5:1. Depois, mantendo a tonalidade (com pequenas variações, se necessário, para aprimorar o visual), criamos as cores com mais e menos luminosidade
Se você decidir manter esse padrão, os níveis de 10 à 40 alcançam um contraste mínimo de 4.5:1 em fundo branco. Já os níveis de 70 à 100 têm o mesmo contraste mínimo em background escuro.
#DicaExtra: Use o Mad Science Colors para visualizar os contrastes
Proporção de contraste com fundo branco na ferramenta Mad Science Colors
Com isso, conseguimos garantir que os nossos componentes tivessem contraste suficiente, utilizando qualquer cor primária.
Diferentes cores primárias mantém o mesmo contraste
#3 Não use a cor como único elemento de informação
Pode parecer uma contradição com o item anterior, mas não é.
Mesmo garantindo a proporção de contraste ideal das cores, as cores não podem ser sua única fonte de informação. Considere ícones, elementos textuais e ênfases visuais para informar o usuário
Todos esses elementos juntos devem passar sua informação de maneira clara e acessível. Se quiser saber mais sobre como consideramos essas interações no Bold, acesse este artigo.
#4 Tenha referências para seu trabalho
Se você sabe o que quer transmitir com suas cores e como fazer isso de forma acessível, já é meio caminho andado. Mas as vezes, o bloqueio criativo simplesmente vem, e você já nem lembra daquelas aulas de círculo cromático dos tempos longínquos da faculdade!
Pra ajudar nessas situações, disponibilizamos nove paletas de cores no Bold, que é open source (ou seja, gratuito)! Você pode acessá-los e utilizar junto aos componentes, ou em qualquer projeto pessoal.
Se preferir, você também pode usar nossa paleta de cores como base e testar alterações. É só acessar este link pra ver essas lindezas.
Temos um orgulho danado delas ❤
[BÔNUS] Evite retrabalho no Dark Mode
Quando pensamos em incluir a versão “dark UI” em nossos projetos, queríamos simplificar a inversão e evitar a criação de novas paletas para cada cor. Se você fizer isso, padroniza suas paletas e evita um retrabalho grande.
A forma mais fácil que encontramos foi simplesmente inverter a paleta de cores. Testamos o funcionamento das paletas até chegar em um resultado satisfatório, onde podemos transformar qualquer produto que utiliza o Bold de light para dark.
Você pode ver como isso funciona na prática e se inspirar no site do Bold!
Criar uma paleta de cores acessível para um design system open source foi uma jornada desafiadora, repleta de testes e muitas, muitas mudanças. Mas o resultado compensou, e esperamos que as dicas que resultaram desse processo também tenham te ajudado.
Testou as paletas do Bold e tem dúvidas ou feedbacks? Manda pra gente! Aqui no Bridge, Compartilhar Dá + XP. 😉
Pra sintetizar, para construir sua paleta de cores acessível:
- Tenha bases teóricas para seu desenvolvimento
- Garanta o contraste ideal entre as cores
- Não use a cor como único elemento de informação
- Tenha referências para seu trabalho
- Evite retrabalho na versão dark mode
O Laboratório Bridge atua no Centro Tecnológico da Universidade Federal de Santa Catarina (CTC/UFSC), com equipes formadas por bolsistas graduandos, pós-graduandos e profissionais contratados. É orientado por professores do CTC e do Centro de Ciências da Saúde (CCS/UFSC).
Desde 2013, desenvolvemos sistemas e aplicativos para gerenciamento da saúde pública em parceria com o Ministério da Saúde e a Agência Nacional de Vigilância Sanitária (ANVISA).
