Considerações sobre
Cores na WEB
Roberto Cabral de Mello Borges
Marco Antonio Alba Winckler
Karen Basso
Instituto de Informática
Universidade Federal do Rio Grande do Sul
Outubro/2000
1
1. Introdução
2. Percepção das Cores
3. Efeitos de Contraste de Cores
4. Efeitos Psicológicos e Culturais das
cores
5. Sistemas de Representação de
Cores
6. Implementação de Cores na Web
7. Recomendações para o uso de
Cores na Web
2
Introdução
• COR:
– poderoso e atrativo aspecto da nossa experiência no mundo.
– proporciona uma importante dimensão na comunicação visual:
» quando bem usada, pode melhorar muito a eficácia da mensagem,
» quando mal usada pode prejudicá-la substancialmente.
• O efeito do uso de cores em meios de comunicação, como
impressão gráfica (jornais, revistas, livros, etc.), fotografia,
televisão, cinema e aplicações em computadores, tem sido
estudado há vários anos .
• Cada meio representa as cores de maneiras diferentes, com suas
regras específicas. Um exemplo típico da necessidade de
adaptações ocorre com a Web.
• As cores têm propriedades diferentes de acordo com a cultura
onde são consideradas. No caso da WWW, deve-se ter cuidados
especiais com para transmitir a mesma mensagem visual às
pessoas de diferentes culturas .
• Fator crítico: pessoas desenvolvem interfaces WWW
negligenciando as regras mais simples de uso de cores.
3
2. Percepção das Cores
2.1 - As Células Sensíveis do olho humano
• Newton (1666) : luz branca do sol decomposta com
um prisma de cristal em radiações com larguras
variáveis. A impressão destas radiações sobre a
retina do olho é o que distinguimos como cor.
• Cor, portanto, é a sensação ou o efeito fisiológico
que produz cada um destes elementos dispersos
que constituem a luz branca.
• No olho, as imagens são formadas sobre a retina,
numa área sensível à luz localizada no fundo do
olho. Na retina estão localizados dois tipos de
células fotoreceptoras: os bastonetes e os cones.
4
• Os bastonetes distinguem a presença e a ausência de
luz ou tons intermediários
• Os cones percebem as cores . Existem três tipos de
cones no olho e cada tipo é capaz de distinguir uma
cor: vermelho, verde e azul. A quantidade de cones
varia para cada cor:
– verde (580nm): 40
– vermelho (540 nm): 20
– azul (440 nm) : 1
5
Espectro Visível de Cores
Sensibilidade Relativa
400
500
600
Vermelho
Laranja
Amarelo
Verde
Ultra
Violeta
Azul
Violeta
Luz Visível
Infra
Vermelho
700
Comprimento de Onda (milimicrons - mµ)
6
2.2 - O Campo Visual
• A capacidade de percepção das cores está diretamente
relacionada ao campo visual, que é o espaço que o olho
abrange quando está imóvel, porque a distribuição das
células fotoreceptoras não é uniforme.
2
30º
3
1
Área 1 - Cones
Área 2 - Cones e Bastonetes
Área 3 - Bastonetes
7
2.3 - Formação de imagens coloridas na retina
• Pequenos músculos possibilitam que o cristalino seja
modificado de modo a focalizar sobre a retina a imagem do
objeto visualizado.
• A acomodação e convergência do cristalino, depende da cor
do objeto visualizado, porque as ondas verde, azul e
vermelha convergem a diferentes distâncias da retina .
• As ondas vermelhas (longas) convergem além da superfície
da retina, as verdes sobre a retina e azuis convergem na
parte frontal da retina.
• Para focalizar objetos :
– vermelhos o cristalino deve tornar-se mais convexo, como se o objeto
estivesse próximo do observador.
– azuis, o cristalino fica menos convexo (mais relaxado), como se objeto
estivesse distante .
– O resultado prático é que o olho sofre uma acomodação toda vez que
tenta visualizar uma área de cor diferente; por isto cores muito
intensas na interface podem causar fadiga visual.
8
2.3 - Formação de imagens coloridas na retina
• A interrupção do movimento do olho pode reduzir
temporariamente a sensibilidade dos cones, produzindo
imagens posteriores (afterimages).
• Observando-se por 30 segundos fixamente uma área
preenchida com uma única cor, e a seguir, mudando-se o
foco para uma folha de papel branco; nela se formará
uma imagem semelhante em forma mas nas cores
complementares da figura original.
• Um área vermelha ficará azul porque foi suprimida
abruptamente a resposta dos cones para ondas longas
(vermelho) e apenas os cones para ondas médias
(verdes) e curtas (azuis) estão respondendo
normalmente para a luz branca.
• Por este motivo, cores com contraste alto e forte podem
produzir afterimages, e devem ser evitadas.
9
2.4 - Diferenças de Percepção das cores entre indivíduos
• Cores não são percebidas por todas as pessoas da mesma
maneira. Estima-se que 8% da população têm algum tipo de
deficiência visual para cor. O tipo mais comum de
deficiência de cor é o dicromatismo, onde a pessoa não
percebe uma das três cores.
• Mesmo entre pessoas sem deficiência visual para cor é
normal encontrar diferenças na percepção das cores.
Antes de chegar a retina parte da luz que atravessa o olho
é absorvida, sendo que a quantidade de luz absorvida
depende da transparência do olho.
• Um pigmento no interior do olho transmite amarelo
enquanto absorve o azul. Há diminuição da sensibilidade
para os azuis e aumento para amarelos e laranjas. Com a
idade, o cristalino e o líquido que preenche o olho tornamse amarelados o que diminui ainda mais a sensibilidade
para o azul, deixa as cores menos vívidas e diminui a
percepção do brilho.
10
3. Efeitos de Contraste de Cores
• As cores se diferenciam por três fatores: matiz (hue),
intensidade (ou saturação) e tom (ou tonalidade).
• É pela matiz que as cores são diferenciadas; por exemplo: o
amarelo do azul, o verde do violeta, etc.
• A intensidade é a dimensão de força de uma cor e é usada
para qualificar os matizes; é a pureza relativa de uma escala
de cinzas. Em sua intensidade máxima, as cores são ditas
puras, e intensidade é o que determina os matizes mais
claros ou escuros.
• O tom é a qualidade acromática e representa o brilho
relativo, do claro ao escuro, de uma cor, em relação a uma
escala de cinzas que varia do branco ao preto.
• Cada cor tem 1 valor relativo de luminescência que descreve
a sensibilidade do olho para cores monocromáticas através
do espectro visível e assim, o amarelo parece muito mais
luminoso que o violeta ou o vermelho (cores escuras).
11
3.1 - Contraste
• O contraste é a base a distinção da forma, tamanho,
posição, volume e aparência dos objetos. Considerando
a cor, o contraste pode ser obtido através de diferenças
no matiz (hue) e tonalidade ou iluminação.
• O efeito de tonalidade é relativo a saturação e
tonalidade da cor. Sob o efeito de uma mesma luz, o
amarelo é a cor de maior visibilidade, a mais clara e
luminosa.
• O contraste entre cores pode ser usado para alterar a
sensação de tamanho entre objetos. Por exemplo, uma
pessoa gorda parece ser mais magra quando veste
roupas pretas. Este efeito se deve a um mecanismo da
visão que aumenta as diferenças de intensidade entre
as cores dos objetos e os faz mais visíveis do que
realmente são.
12
Círculo das Cores
13
3.1 - Contraste
• Estudos têm demonstrado que os melhores efeitos de
contraste são percebidos por diferença de tonalidade.
• Na conversão para tons de cinza, algumas cores
assumem a mesma tonalidade e se confundem. Este
efeito de contraste é importante se é utilizado monitor
ou impressora monocromáticos.
FIGURA 4 Ğ Ordem Crescente de Vi si bili dade segundo o Contraste entre as Cores.
14
Conversão das cores para tons de cinza
15
Qualidade da visibilidade da cor
• Em 1958, Heison, avaliou a qualidade da
visibilidade das cores, a uma distância de 180
metros, numa escala de 0 a 100
–
–
–
–
–
–
–
–
amarelo âmbar
amarelo fluorescente
laranja fluorescente
laranja
vermelho flourescente
vermelho
azul
verde
95
73
69
54
51
35
26
24
• Experiências realizadas na Alemanha, revelaram que a
tela amarelo âmbar teve um desempenho 4 vezes melhor
que uma preto e branco. Na seqüência ao amarelo âmbar
segue-se o verde e o azul
16
3.2 - Cores Complementares e Constrastes
• São complementares as cores 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. 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.
17
Cores Complementares
A
B
C
D
18
Contraste e Harmonia
• Harmonia das cores:
– harmonia das cores opostas ou de contraste: o maior contraste
se obtém justapondo cores complementares; a maior superfície
é colorida com uma cor quente e a menor com sua cor
complementar fria
– harmonia das cores análogas ou vizinhas: é o emprego de uma
cor e uma ou duas vizinhas; por exemplo: laranja e seus
vizinhos, vermelho e amarelo; a cor mais clara usada na
superfície maior
– harmonia monocromática ou de cor dominante: é o uso de uma
única cor, aplicada pura e em vários tons, claros e escuros
• Cores Complementares:
– Vermelho - Ciano (azul piscina)
– Verde - Magenta (lilás)
– Azul - Amarelo
19
Harmonia das 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.
20
4. Efeitos Psicológicos e Culturais das Cores
• A escolha de uma cor para uma comunicação visual eficiente
tem 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.
21
5. Sistemas de Representação de Cores
• As cores são representadas de maneira diferente se o
dispositivo reflete ou emite luz.
• Objetos que não emitem luz refletem uma parte da luz que
incide sobre eles e absorvem a outra parte.
• Sob luz branca, uma lima é vista amarela porque reflete a
radiação amarela e absorve as demais . Uma folha de papel
é branca porque reflete todas as radiações da luz branca e
não absorve nenhuma.
• A sensação da cor é relativa e variável segundo a natureza
da fonte luminosa e do objeto. Se uma lima é iluminada por
uma luz azul, esta se transforma em verde; neste caso a
reflexão do amarelo se soma a da luz azul e ambas as cores
são refletidas misturadas.
• Assim, os dispositivos que representam cores seguem o
modelo subtrativo quando não emitem luz e aditivos quanto
emitem luz.
22
5.1 - Modelo substrativo e Aditivo de cores
• Dispositivos que misturam pigmentos coloridos,
(impressora, Scanner), seguem o modelo subtrativo
cujas cores primárias são: amarelo,
amarelo magenta
magenta e ciano
ciano .
A mistura de todas as cores produz o preto.
• Dispositivos baseados na emissão de luz (monitor, datashow) seguem o modelo aditivo, cujas cores primárias
são vermelho,
vermelho verde
verde e azul-violeta
Azul-violeta . O branco é
obtido pela mistura de todas as cores.
23
5.2 - Sistemas de Representação de Cor
• São modelos aditivos o HSV, o HLS e RGB . Entre os
modelo subtrativos, o mais empregado é o CMYK.
• O sistema RGB é o padrão de cores na WWW. É um
sistema cartesiano (x, y, z) onde cada cor primária (Red,
Green e Blue) representa um dos eixos do cubo RGB. É
o modelo usado em TV e monitores
• O modelo CMYK é formado pelas cores ciano (Cyan),
magenta (Magenta), amarelo (Yellow) e preto (blacK). É
utilizado em dispositivos de impressão.
• Algumas cores podem ser exibidas nos monitores de
vídeo, mas não podem ser impressas, e algumas cores
podem ser impressas, mas não exibidas em monitores.
Além disso, existem cores que podem ser vistas pelo
olho humano, mas não podem ser produzidas por
monitores e impressoras.
24
6. Implementação de Cores na Web
• Para interfaces WWW devem ser considerados:
–
–
–
–
a) padrões e limitações da tecnologia para construção das interfaces;
b) diversidade de plataformas;
c) forma de utilização de tais interfaces;
d) internacionalização de interfaces conforme o público-usuário.
6.1 - Padrões www e suas Limitações para Representação de Cores
• O sistema de referência para a WWW é o RGB. A partir da versão HTML 3.2,
novas TAGs permitiram definir cores de alguns elementos tais como o
fundo da página, blocos de texto e links.
– <body bgcolor="#33FF33"> altera a cor de fundo da página;
– <body link="#FFFFCC"> altera a cor de um link não visitado;
– <font color="#9999CC">... </font> altera a cor no texto selecionado.
• São utilizados 2 dígitos para cada componente da cor (Red, Green e
Blue) num espectro limitado de cores. O padrão RGB foi adotado
porque é implementado pela grande maioria dos fabricantes de
dispositivos de vídeo, e desta forma, garante a uniformidade de
referências a cor.
25
6.1 - Padrões www e suas Limitações para
Representação de Cores
• Formatos para imagens:
– GIF (Graphic Interchange Format) - proprietário
[256 cores]
– PNG (Portable Network Graphics ) - aberto
– JPEG (Joint Photographic Experts Group )
[milhões cores].
26
6.2 - Diversidade de Plataformas
• Há diferenças entre cores representadas em monitores
do mesmo padrão RGB. Diversos fatores causam as
diferenças, entre eles, o gamut, ou seja, o grau de
contraste entre os valores intermediários de cinza de
uma imagem.
• Valores de gamut:
– Macintosh - 1.8
– PC - 2,2
• Imagens geradas em um Mac parecerão muito mais
escuras na plataforma PC enquanto as geradas no PC
parecerão apagadas e sem brilho no Mac.
• Para uma representação mais uniforme, Lynch e
Hortson (1999) recomendam que imagens no Mac sejam
“iluminadas” enquanto naquelas geradas no PC deve
ser adicionado mais contraste.
27
6.2 Diversidade de Plataformas
• Comparando a paleta de cores padrão do Mac e PC,
apenas 216 cores são idênticas [paleta de 255 cores].
• Uma imagem GIF gerada sob a paleta padrão do sistema
operacional se pode modificar (em termos de cores
utilizadas) em outra plataforma. Isto é crítico porque
usar a paleta padrão na geração de imagens GIF é uma
recomendação para garantir a padronização das paletas
utilizadas pelo browser.
• Não deve ser desconsiderado que muitos usuários
ainda utilizam computadores Preto e Branco para os
quais as recomendações sobre impressões em papel
apresentadas são válidas.
• Em plataformas com número reduzido de cores (16 ou
255) como ficaria o contraste e a legibilidade da
interface considerando estas configurações?
28
6.3 - Utilizações de Interfaces www
• Cores devem ser planejadas para interface
considerando o contexto em que serão utilizadas.
• Muitos usuários imprimem as páginas encontradas na
WWW. Diversos fatores levam a esta atitude, entre eles:
– a impressão é estável e permanente;
– a leitura sobre monitores (especialmente CRT) cansa a visão.
• Impressões em cores são populares, mas têm alto custo
e velocidade menor. Assim, como fica a versão em preto
e branco da interface, se o usuário fizer esta opção?
• É possível modificar a cor padrão de links e links
visitados (azul e vermelho), bem como o cursor, para
criar contraste sobre um fundo em cores.
• Como o usuário pode configurar o browser para aceitar
ou não estas mudanças, todo o cuidado com a escolha
das cores sobre o fundo pode ser inútil.
29
7. Recomendações para o uso de Cores na Web
1. Não usar blink: O uso intensivo de piscar (blink) um texto ou
imagem, causa fadiga visual, pois dependendo das cores usadas
para fundo e texto ou imagem, o olho precisa reposicionar o
correspondente sensor da cor a ser usada em cada instante do
efeito de piscar, ou dependendo das cores usadas reposicionar o
foco a cada instante.
2. Não usar fundos escuros: Fundo preto não é recomendado
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 (além
de gastar grande quantidade de toner/tinta).
3. Não usar cores alternativas para links: Pode-se acrescentar
cores para casos alternativos como (mantendo-se os padrões):
– Link ainda não visitado que fica na mesma página (âncora) verde
– Link já visitado na mesma página - rosa
– Link para o nodo hierarquicamente superior - laranja/amarelo
âmbar
30
7. Recomendações para o uso de Cores na Web
4.
Reduzir o número de cores: Muitos “designers”
se esquecem que a maioria dos monitores só
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.
– Para páginas na Internet, recomenda-se 256 cores.
5.
Usar sempre textos com letras pretas: A letra
preta, sobre um fundo claro, tem melhor legibilidade, e
não gera problemas na hora da impressão. Com esta
escolha, os fundos escuros, tais como azul, vermelho,
roxo e verde-escuro, que necessitariam de letras
brancas para obter bom contraste.
31
7. Recomendações para o uso de Cores na Web
6. Não tornar a tela muito brilhante ou escura
– use as cores brilhantes em áreas pequenas e cores suaves em áreas
maiores
7. Não apostar na boa habilidade e acuidade visual de
todos os usuários
– grande nº de pesoas têm algum tipo de disfunção visual; algumas
pessoas não consiguem distingüir algumas cores e confundem outras;
daltonismo e a distorção de algumas lentes provoca estes efeitos.
8. Não associar muitas cores para serem lembradas
– as cores podem possuir um significado, além daqueles mais populares
(vermelho para Pare e Verde para Seguir).
– Como exemplo: Cinza para Home-Page, Branco para Texto, Verde para
Apresentações (PowerPoint) e Amarelo para Planilhas.
9. Cores Opostas:
– se vermelho é Pare: oposto é verde
– se vermelho é calor, quente: oposto é azul
32
7. Recomendações para o uso de Cores na Web
10. Associações comuns:
–
–
–
–
vermelho: pare, perigo, fogo, quente
amarelo: cuidado, atenção, aviso
verde: siga, OK
azul: frio, água, sono
11. Diferenças culturais na associação de cores
alguns países têm cores associadas à alguns objetos e fatos:
– no Japão marginais usam chapéu azul
– no Egito o amarelo é a cor da alegria e prosperidade
– as caixas de correio são vermelhas na Inglaterra, azuis nos Estados
Unidos, amarelas na Grécia e verdes ou amarelas no Brasil
12. Lembrar que cores mal utilizadas é pior do que não
usar cores
33
Referências Bibliográficas
• Borges, R.Cabral M. Interface de Navegação em Sistemas de
Hiperdocumentos.
Dissert. de Mestrado, CPGCC/UFRGS, P. Alegre, 1998.
• Del, G.;Nielsen, Jakob. International User Interfaces. N.York, J. Wiley, 1996.
• Foley, J. Computer Graphics, Principles and Practice. Addison-Wesley,
Reading, Massachusetts, EUA, 1996.
•
•
•
•
Graves, M. The Art of Color Design. Mc Graw Hill, New York, 1951.
Hayten, P. El Color en la Industria. Las Ediciones de Arte, Barcelona, 1958.
Lynch, P & Horton, S. Web Style Guide. Yale Univ. Press, 1999.
MacDonald, L. Using Color Effectively in Computer Graphics. IEEE
Computer Graphics and Applications vol 19 n 4 (Jul-Aug., 1999).
• Marcus, Aaron. Principles os Effective Visual Communication for
Graphical User Interface Design. San Francisco-CA: Morgan Kaufmann, 1995.
• Murch, S. Physiological Principles for the effective Use of Colors. IEEE
Computer Graphics and Applications, V 4. #11, Nov. 1984.
• Shneidermann, B. Designing the User Interface. 1997, Add.-Wesley, N.York.
• Steinhaus, A. The Nine Colours of the Rainbow. Mir Publish, Moscow, 1970.
• Stone, M. C. A survey of color for computer graphics. SIGGRAPH-1999.
34
Apresentador:
Roberto CABRAL de Mello Borges
E-mail: [email protected]
Home-Page:
http://www.inf.ufrgs.br/~cabral/cabral.htm
l
Fone: (051)316-6798
35