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)

#1 Tenha bases teóricas para seu desenvolvimento

#PraCegoVer: Gif de Arnold, da animação Hey, Arnold, dizendo: “It wasn’t lucky, I studied hard” ou “Não foi sorte, eu estudei muito”.

#2 Garanta o contraste ideal entre as cores

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

Proporção de contraste com fundo branco na ferramenta Mad Science Colors
Diferentes cores primárias mantém o mesmo contraste

#3 Não use a cor como único elemento de informaçã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

#4 Tenha referências para seu trabalho

Temos um orgulho danado delas ❤

[BÔNUS] Evite retrabalho no Dark Mode

Página do componente de Alerta na versão light, com cor de fundo branca e letras pretas, e versão dark, com cor de fundo preta e letras brancas.
  1. Tenha bases teóricas para seu desenvolvimento
  2. Garanta o contraste ideal entre as cores
  3. Não use a cor como único elemento de informação
  4. Tenha referências para seu trabalho
  5. Evite retrabalho na versão dark mode

--

--

Soluções tecnológicas inovadoras para qualificar a gestão pública, visando o benefício social.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Laboratório Bridge

Soluções tecnológicas inovadoras para qualificar a gestão pública, visando o benefício social.