Considerações sobre Cores na WEB

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 Sensibilidade Relativa

7. Área 1 - Cones Área 2 - Cones e Bastonetes Área 3 - Bastonetes 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.

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

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.

15. Conversão das cores para tons de cinza

16. 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 95 • amarelo fluorescente 73 • laranja fluorescente 69 • laranja 54 • vermelho flourescente 51 • 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

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

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 vermelho verde Azul-violeta

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, ogamut, 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. 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.

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

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

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