Olá Pessoal! Neste artigo veremos como lidar com as cores na web sem trazer desconforto ou fadiga ao visitante.
A escolha de uma cor para uma comunicação visual eficiente possui critérios técnicos, como aspectos fisiológicos do olho e sensibilidade à determinada cor, assim como fatores culturais, hábitos, idade, contexto e de outros fatores subjetivos.
Vários estudos tentam explicar porque determinadas pessoas preferem certas cores e qual o significado das cores em determinadas culturas.
A cultura e a religião são os aspectos mais importantes para determinar a preferência por cores. Para Cristãos e Judeus, o branco, o azul e o dourado são cores ditas sagradas enquanto para povos islâmicos é o verde e o azul brilhante. Um exemplo foi um fábrica de assentos para vaso sanitário, que não conseguiu vender assentos da cor verde em países do Oriente Médio, como também sofreu ataques, pois estaria ofendendo e agredindo o profeta Maomé, cuja cor-símbolo é o verde. Esse na verdade é um assunto delicado e polêmico, e melhor tratado em nosso artigo sobre símbolos.
As cores devem ser planejadas para interface considerando o contexto em que serão utilizadas, muitas vezes tendo que respeitar a cor do logotipo da empresa. Nesses casos podemos brincar com as cores representadas no disco de Newton.
Disco de Newton |
|
![]() |
Para sanar o problema da cor do logo da empresa usamos as cores complementares, que estão opostas no círculo das cores como, por exemplo, o verde é a complementar do vermelho. Uma cor se intensifica quando justaposta à sua complementar, ao branco, preto ou cinza devido ao contraste criado. Uma cor reduz sua intensidade quando se mistura algo de sua complementar. Podemos então usar as cores de um logo, mesmo que muito vivo, neutralizando sua intensidade. |
Mas tome cuidado, as cores são complementares quando misturadas, porém podem trazer efeitos indesejáveis quando exibidas em cores chapadas (uniformes).

No exemplo acima podemos ver que no caso de cores uniformes, as cores complementares não são tão complementares assim. O exemplo é descarado e mostra que é de muito mau gosto utilizar essas cores tais como foram aqui empregadas.
As pessoas que são daltônicas não conseguem visualizar essas combinações, sendo que as outras pessoas sentirão certo desconforto ao ler os textos acima.
O daltonismo é uma doença congênita que provoca a confusão de cores, principalmente o verde e o vermelho. Devemos estar atentos a essas cores para não agredir nossos clientes.
Cores harmônicas
Cores harmônicas são aquelas que estão próximas na seqüência no círculo das cores como, por exemplo, vermelho, laranja e amarelo, etc. As cores também podem ser harmônicas pela combinação em triângulo da roda de cores.
Outra forma de manter a harmonia de cores é o uso de uma única cor, variando-se a intensidade da mesma, ou seja, dosando-se progressivas quantidades de branco ou preto à cor pura.
Recomendações
01. Não usar itens que piscam. O uso intensivo, sendo um texto ou imagem, causa fadiga visual, pois dependendo das cores usadas para fundo, texto ou imagem, o olho precisa reposicionar o correspondente sensor da cor a ser usada em cada instante do efeito, ou dependendo das cores usadas reposicionar o foco a cada instante.
02. Evitar fundos escuros: Fundo preto não é recomendado (principalmente em portais de comunicação), pois há poucas cores que contrastam e causa cansaço visual. No caso de impressão em P & B, a cor usada para o texto ou imagem pode ser convertida para escuro e se confundir com o fundo, o que pode causar transtornos à usuários inexperientes.
03. Não usar muitas cores alternativas para links: Em muitos casos é mais interessantes fazer uso do sublinhado. (não é uma regra)
04. Reduzir o número de cores: Muitos "designers" se esquecem que a maioria dos monitores apenas conseguem representar, milhares de cores, outros 256 ou 16 cores, além dos monitores P & B que equipam sistemas comerciais. Para sistemas comerciais, usar apenas 16 cores, pois ao serem convertidas para monocromático, há padrões de cinza suficientes. Exemplo:
![]() |
|||
imagem com pouco contraste |
em monitor monocromático |
imagem com bom contraste |
em monitor monocromático |
05. Usar sempre textos com letras pretas: A letra preta, sobre um fundo claro, tem melhor legibilidade. Podemos dispor de opções para troca da cor de plano de fundo, porém esse recurso pode não ser bem aceito pela maioria.
06. Não tornar a tela muito brilhante ou escura use as cores brilhantes em áreas pequenas e cores suaves em áreas maiores.
07. Não apostar na boa habilidade visual de todos os usuários, grande número de pessoas têm algum tipo de disfunção visual tais como os daltônicos. A distorção de algumas lentes também pode provocar estes efeitos.
08. Não associar muitas cores para serem lembradas (tais como as de links), as cores podem possuir um significado, além daqueles mais populares (vermelho para Pare e Verde para Seguir).
09. Cores Opostas: se vermelho é Pare: o oposto é verde; se vermelho é calor (quente); o oposto é azul (frio).
10. Associações simples melhor captadas por leigos:
vermelho: pare, perigo, fogo,
quente.
amarelo: cuidado, atenção, aviso.
verde: siga, aprovação, okay.
azul: frio, água, sono.
Assegurar que todas as informações vinculadas com a cor estejam também disponíveis sem cor. Se a cor for o único meio utilizado para transmitir informações, as pessoas que não diferenciam cores, bem como os usuários de monitores monocromáticos e dispositivos não coloridos, não receberão essas informações.
Pois é pessoal. Tenham em mente que as cores mal utilizadas são piores do que não fazer uso delas.
Abraços!














7 Comentários
Qual a sua opinião?