Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Color Theory
Webdesign

Por Que Deveríamos Evitar Combinações de Cores Vibrantes

by
Length:ShortLanguages:

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Nesse rápido artigo, aprenderemos como cores vibrantes afetam a legibilidade na web e no design de interfaces.

Forte ou Berrante?

Tem crescido entre os designers de interface em imitar os esquemas de cores berrantes vistos no design impresso. Embora devido as tendências ideológica, esse impulso também emerge da nova série tipográfica disponível a designers web modernos, encorajando layouts parecidos aos impressos e fontes grandes. É importante notar as distinções entre cada meio, causando cores vibrantes um pouco mais permissíveis no impresso e menos na web.

Cores vibrantes no site da Frooti.

No impresso, esquemas de cores fortes geralmente é a diferença entre ser ignorada em uma prateleira e ser vendido. Por outro lado, em interfaces de usuário, temos considerações que precedem em relação à chamada da atenção dos usuários à força, em particular, a legibilidade de texto.

O Que É Vibração?

Um dos fenômenos primários emergentes a partir de cores fortes e muito saturadas é a aparente core "vibrante", algo que faz parecer que as bordas de duas cores adjacentes se fundem, borram e brilham, dando a ilusão de movimento.

Os dois exemplos externos tem textos com cores vibrantes, enquanto o central tem texto com valor equiluminante.

Josef Albers, o notório teorista de cores, avisa contra o uso de cores vibrantes, no seu livro clássico, Interações das Cores:

"O efeito excitante inicial parece agressivo e até desconfortável aos olhos. Quase não se vê usado, exceto por efeitos gritantes em propagandas e, como resultado, é desagradável, antipático e evitável".

Para um par de cores ter pouca visibilidade um contra a outra, é necessário que sejam equiluminantes, com valores de iluminação similares. Contudo, para poderem vibrar, as cores deverão ser de alta saturação e complementares uma à outra, invertidas aproximadamente 180º na roda de cores.

Azul (HSB 210, 99, 100) sobre vermelho (HSB, 12, 99, 100)

No exemplo acima, as matizes vermelha e azul podem ser encontradas em lados opostos da roda das cores (embora não diretamente opostas) e ambas tem 100 de brilho.

Spotify EDM
Spotify EDM

Spotify é sinônimo de cores fortes, usadas eficientemente para chamar atenção. Algumas vezes, essas combinações podem ser desagradáveis, mesmo que não vibrem "de verdade", como o botão contra o plano de fundo roxo no exemplo acima. Os olhos dos usuários reconhecerão, mas alguns terão problemas em reconhecer a forma das bordas exteriores.

Legibilidade

Texto de interface é prejudicado quando colocado em cor vibrante e equiluminante. Selecionamos essas cores vibrantes:

Quando vibração de cores ocorre, o elemento mais afetado pelo efeito de distorção de brilho é a borda entre as duas cores. É por isso que vibração é bem perigosa no contexto de fontes de UI, ícones pequenos e outros elementos detalhados não grandes suficiente para compensar o borrão das bordas vibrantes.

Eis o mesmo conjunto de amostras, dessas vez vistas por alguém com daltonismo:

Além dos problemas e vibração e desfoque de cor para quem ver normalmente, cores com luminescência igual fazem pessoas com daltonismo não as verem. Embora haja variados níveis de daltonismo, é melhor ser seguro em relação a acessibilidade.

Aqui, por exemplo, o ícone de lixo do Apple Watch não é visível para quem tem daltonismo:

Visão colorida (esquerda) contra daltonismo (direita)

Conclusão

Cores vibrantes podem ser usadas efetivamente, mas podem sr perigosas na usabilidade de UI e podem ser desastrosas se não forem bem analisadas antes de usadas. Tenhamos isso em mente ao projetar!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.