A importância das cores em produtos digitais
Na construção de um produto, em especial um produto digital, as cores que fazem parte dele são essenciais na sua efetividade, tanto do ponto de vista do mercado quanto da usabilidade e acessibilidade. Sempre devemos levar em conta qual o público a que esse produto é destinado, qual o tom de voz e a mensagem que o mesmo deverá transmitir, e também seu guia de marca para que as cores empregadas nele sejam realmente coerentes.
Na psicologia encontramos algumas respostas de como podemos utilizar as cores, pois esta área de estudo traz para o design contribuições muito significativas sobre o comportamento humano.
Com a psicologia das cores compreendemos seus efeitos nas emoções e sentimentos nas pessoas, sejam eles positivos ou negativos. Com isso, a escolha de cada tom utilizado em um produto não será aleatória, mas cuidadosamente definida para despertar desejo, interesse, curiosidade e instigar uma ação. Em outras palavras, aplicando as cores certas iremos gerar o impacto desejado na percepção dos usuários.
Segundo a autora Eva Heller, em seu livro A psicologia das cores: Como as cores afetam a emoção e a razão revela a importância das cores, “a cor é mais do que um fenômeno óptico, mais do que um instrumento técnico”. Portanto, devemos ter cautela na aplicação de cores na construção de um produto.\ Abaixo, um pequeno resumo do que as cores em sua essência representam:
Para que as cores realmente tenham sentido em sua utilização é necessário que sejam apresentadas em um contexto adequado, levando em conta convenções já existentes. Um bom exemplo disso é não definir um tom de vermelho para uma ação que foi realizada com sucesso, ou mesmo tons verdes ou que não chamam atenção para apresentar mensagens de erro.
Talvez você esteja se perguntando: “como faço então para definir quais cores meu produto deve ter?”
Existem diversas técnicas que ajudam na definição das cores, entre elas o círculo cromático, que é uma das mais utilizadas.
O círculo cromático possui um total de doze cores divididas em:
3 primárias — Azul, vermelho e amarelo 3 secundárias — laranja, verde e roxo 6 terciárias — vermelho-arroxeado, vermelho-alaranjado, amarelo-alaranjado, amarelo-esverdeado, azul-esverdeado e azul-arroxeado
Para encontrarmos harmonia entre essas cores, podemos utilizar as seguintes combinações:
Outros fatores como contraste, brilho, sombras e tons também podem influenciar nas cores resultantes destas combinações.
Cores e acessibilidade
Definir cores agradáveis não é o suficiente para definir a eficiência do seu produto. As cores devem ser acessíveis para todos os usuários, independente de sua condição ou meio. Segundo censo do IBGE de 2010, a deficiência que mais ocorre no Brasil é a visual, com cerca de 18,6%.
Algumas destas deficiências, como o daltonismo, dificultam a distinção das cores, o que impacta diretamente na maneira como devemos trabalhá-las para estes usuários.
A W3C disponibiliza diretrizes internacionais de acessibilidade (Web Content Accessibility Guidelines ou WCAG) que ajudam nessa definição.
Segundo a WCAG:
“As cores devem ter contraste suficiente entre a cor do texto e seu fundo (tecnicamente chamado de taxa de contraste de luminosidade ). Isso inclui texto em imagens, ícones e botões. Além disso, as cores usadas para transmitir informações em diagramas, mapas e outros tipos de imagens devem ser distinguíveis.”
O contraste das cores na apresentação de conteúdos é definitivamente importante, pois além de favorecer o acesso ao público com daltonismo, permite que pessoas com baixa sensibilidade ao contraste, como as pessoas mais velhas, possam acessar o produto sem maiores dificuldades.
Abaixo um vídeo que ilustra a questão do contraste nas cores:
Existem algumas ferramentas que permitem testar as cores de seu produto digital, ajudando, assim, na assertividade com relação a esses usuários. Dentre as ferramentas temos a Toptal, que simula diversos tipos de deficiências cromáticas e o Coolors, que permite verificar o contraste entre as cores baseado nas diretrizes da W3C.
A definição de cores de uma maneira consciente e inteligente aumentará a efetividade do seu produto aumentando as chances de consolidá-lo no mercado.
Referências:
- W3G, Colors With Good Contrast;
- Topal, Color Blind Filter;
- Coolors, Contrast Checker;
- Des1gnon, Psicologia das Cores;
- Medium, Cores em UI: Um Guia Rápido Para Usar em Seus Projetos.
- A psicologia das cores : como as cores afetam a emoção e a razão / Eva Heller ; [tradução Maria Lúcia Lopes da Silva]. — 1. ed. — São Paulo : Gustavo Gili, 2013.
Originally published at https://ateliware.com.
