Considera

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
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
Azul-violeta
verde
vermelho
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.
• ltbody bgcolor"33FF33"gt altera a cor de fundo
  da página
• ltbody link"FFFFCC"gt altera a cor de um link não
  visitado
• ltfont color"9999CC"gt... lt/fontgt 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
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
ApresentadorRoberto CABRAL de Mello
BorgesE-mail cabral_at_inf.ufrgs.brHome-Page
http//www.inf.ufrgs.br/cabral/cabral.htmlFone
[phone]