1

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

2

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

3

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.

4

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.

5

• 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

6

Espectro Visível de Cores

400 500 600 700

Luz Visível

UltraVioleta

InfraVermelhoVioleta Azul VerdeAmareloLaranjaVermelho

Comprimento de Onda (milimicrons - mµ)

Sensibilidade Relativa

7

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.

30º

1

2 3

Área 1 - ConesÁrea 2 - Cones e BastonetesÁrea 3 - Bastonetes

8

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.

9

• 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.

2.3 - Formação de imagens coloridas na retina

10

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 tornam-se amarelados o que diminui ainda mais a sensibilidade para o azul, deixa as cores menos vívidas e diminui a percepção do brilho.

11

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).

12

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.

13

Círculo das Cores

14

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 Visibilidade segundo o Contraste entre as Cores.

15

Conversão das cores para tons de cinza

16

• 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 95– amarelo fluorescente 73– laranja fluorescente 69– laranja 54– vermelho flourescente51– vermelho 35– azul 26– verde 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

Qualidade da visibilidade da cor

17

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.

18

Cores Complementares

A B C D

19

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

20

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.

21

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.

22

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.

23

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, magenta e ciano. A mistura de todas as cores produz o preto.

• Dispositivos baseados na emissão de luz (monitor, data-show) seguem o modelo aditivo, cujas cores primárias são vermelho, verde e azul-violeta. O branco é obtido pela mistura de todas as cores.

amarelo magenta ciano

Azul-violetaverdevermelho

24

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.

25

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.

26

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].

27

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.

28

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?

29

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.

30

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

31

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.

7. Recomendações para o uso de Cores na Web

32

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

7. Recomendações para o uso de Cores na Web

33

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 coresalguns 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

7. Recomendações para o uso de Cores na Web

34

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.

35

Apresentador:Roberto CABRAL de Mello BorgesE-mail: cabral@inf.ufrgs.brHome-Page: http://www.inf.ufrgs.br/~cabral/cabral.htmlFone: (051)316-6798