Usabilidoido: Menu Principal

English Website


Contraste de cor depende do contexto

Uma mesma combinação de fundo azul e texto preto não é boa no contexto branco, mas no preto até que é razoável.

Pablo Barros enviou para a ArqHp o link de um analisador automático de contraste que se baseia numa fórmula bolada pelo W3C. Você envia seu CSS e ele diz quais formatações apresentarão problemas de legibilidade para daltônicos e usuários de monitores monocromáticos (ainda existe algum?).

A intenção é boa, mas está longe de resolver o problema na prática. O problema é que o contraste entre duas cores depende do contexto em que elas estão inseridas. Note no exemplo abaixo que uma mesma combinação de fundo azul e texto preto não é boa no contexto branco, mas no preto até que é razoável.

Num monitor preto-e-branco essa diferença é ainda mais fácil de perceber:

Por quê isso acontece? Ainda não li uma boa explicação fisiológica, mas chuto o seguinte: no último exemplo, o fundo branco provoca o fechamento da pupila e o preto provoca abertura. A pupila se dilata e abre para entrar mais luz na retina. O mesmo cinza parece diferente porque realmente entram quantidades diferentes de luz na retina. Talvez não seja esse o motivo, mas algo me faz crer que o fenômeno não é só interpretativo, mas também físico.

Segundo Benjamim Martinez (Visual Forces, 1988), o que acontece é parecido com o fenômeno que provoca a persistência de imagens (olhe para um objeto vermelho e depois para um fundo branco e uma silhueta verde aparecerá). Nessa ilusão de ótica dá pra perceber isso bem nítido:

Os artistas chamam isso de interação entre cores e atribuem um valor importantíssimo na pintura. Essa aplicação em Java permite brincar com a interação entre cores e aprender muito sobre ela (só cuidado para não queimar a retina).

O minimalista alemão Josef Albers realizou diversos estudos empíricos para investigar o fenômeno e alguns de seus achados estão nesta página. Segue trecho traduzido:

O efeito é modificado ou aumentado pelas cores particulares escolhidas. Cores puras, intensas, primárias não são tão afetadas pelo contexto, mas as de baixa intensidade e cores não-primárias ou espectrais podem mudar de aparência radicalmente.

O tamanho também pode influenciar o efeito de contraste simultâneo. Geralmente, áreas de cor maiores tem mais influência sobre as menores. O pequeno quadrado verde é mudado pela cor do quadrado amarelo ou azul, não o inverso. É por isso que o texto parece ser afetado pela cor do fundo e não o contrário, ou porque um fio branco desfiando por cima de uma roupa verde parece tão brilhante.

Então, já que as cores fortes não sofrem efeito de interação entre cores, devemos colorir nossos layouts apenas com tais cores? Absolutamente não, mas é isso que induz o analisador automático de cores. Segundo ele, a combinação lá de cima deveria ser assim para que fosse legível:

Inegável que seja mais legível que a alternativa lá de cima, mas será que precisamos de tanto contraste assim? Quase sempre o contraste excessivo prejudica a harmonia de um layout porque chama muito a atenção para um determinado ponto. Como uma página Web é constituída de diversos pontos, fica difícil estabelecer uma hierarquia visual sem prejudicar a harmonia. Sem harmonia, em geral, não há beleza. Todos almejam os ideais estéticos, inclusive pessoas com necessidades especiais. Por uma acessibilidade mais bonita e menos automatizada! Viva o homem!


Dicas

Siga-me no Twitter, Facebook, LinkedIn ou iTunes.

Autor

Frederick van Amstel - Quem? / Contato - 30/03/2005

Palavras-chave

legibilidade    contraste    harmonia    cor    cores    beleza    sombra    

Opções



Comentários

Discussão
CARLOS DTARSO
21/04/05 às 02:16

FEZ UM AMIGO


Discussão
Ines
17/05/05 às 23:54


gostaria de receber sugestões de combinaçoes de cores, para pintar uma sala onde o sofá é caramelo,

Abraços.


Discussão
Fred
18/05/05 às 00:22

Olá Ines, esse site oferece um simulador de ambientes, onde você pode testar várias combinações de cores:

http://www.behr.com/behrx/workbook/index.jsp

Escolha a que você se sente melhor. Acredito que uma cor clara vai ficar legal.

Boa escolha!


Discussão
Mikhael
17/08/05 às 20:37

sinceramente, achei que não fazia muitop sentido o que você falou sobre não ser importante um contraste no texo, quando eu desenvolvo um site, experimental, concordo que não há necessidade de muito contraste, visto que a idéia é, na realidade, "apresentar tecnologoas ao mundo", agora, em um site institucional, onde o mais importante é passar informações a clientes e interessados em geral, não faz sentido, visto que como você disse, o contraste chama atenção para um ponto do layout, justamente o ponto mais importante... ao entrar no site da lifemotion, eu entro para ver boas animações e ilustrações, ap entrar no uol, ou melhor, no usabilidoido, eu entro com a intenção de ler um bom artigo, portanto quero que o artigo seja o ponto mais chamativo do site...


Discussão
Fred
17/08/05 às 20:59

Concordo que a tipografia de textos médios e longos deve ter bastante contraste, mas não demais.

Se o Usabilidoido e o UOL tivessem apenas um bloco de texto por página, poderíamos concentrar todo o contraste nesse bloco apenas, mas a verdade é que muitas páginas tem vários blocos, uns mais importantes, outros menos. Se todos eles adotarem o contraste forte sugerido pelas ferramentas de análise automáticas, então haverá muitos pontos chamando a atenção ao mesmo tempo e a harmonia estará prejudicada.

No final deste post tem alguns exemplos interessantes de designs que permitem uma leitura confortável sem usar contrastes fortes demais:

http://www.usabilidoido.com.br/resultado_do_perfil_semiotico_ii.html


Discussão
rebeca
20/09/05 às 19:27

no tein ó qué io quiero.


Discussão
dmcd,vd
03/10/05 às 09:28

tem q ter: o q é cor ?


Discussão
driTama
08/02/06 às 18:41

eu não sei se vc já leu ou não, mas os seus artigos sobre cor me fizeram lembrar um conto do oliver sacks (q é um neurologista, mas como vc, um curioso em diversas áreas). O conto se chama: "O caso do pintor daltônico" e é o primeiro do livro "Um antropólogo em Marte". Foi-me indicado por um professor de pintura qdo eu ainda estava na faculdade e na época gostei do q li (inclusive me deu vontade de ler de novo e acho q é isso q vou fazer agora)

Conta a história de um paciente do autor q perde em um acidente a capacidade de enxergar as cores (enxergando tudo "cinza") e sendo um pintor acaba passando por uma série de situações perturbadoras, já q tudo o q fazia era lidar o tempo todo com as questões da cor.

Por ser escrito por um médico não há "grandes passagens" ou um modo de escrever muito marcante, no entanto, é recheado de informações no mínimo interessantes sobre a percepção e sobre como nosso olho e nosso cérebro registram a cor.

Ele pincela umas teorias importantes sobre o assunto, embora não se aprofunde em nenhuma, mas pelo que me lembro ele cita um pouco de Vigotsky, outro tanto de goethe e outros estudiosos importantes... é meio um apanhado tb para q a nossa própria curiosidade nos leve a procurar os caras citados (do mesmo modo q ele próprio se viu obrigado a fazer).


p.s.: achei esse site por acaso numa busca pelo assunto "design de interface"... e acabei achando outras coisas interessantes por aqui, embora não concorde com tudo, achei uma boa iniciativa a construção e manutenção do que se vê aqui... parabéns!


Discussão
luis augusto guimaraes
05/09/06 às 13:37

muito bom o blog, muita coisa interessante...
tenho a minha teoria aqui, nao explica tudo, mas completa a tua tese...

"Por quê isso acontece? Ainda não li uma boa explicação fisiológica, mas chuto o seguinte: no último exemplo, o fundo branco provoca o fechamento da pupila e o preto provoca abertura. A pupila se dilata e abre para entrar mais luz na retina. O mesmo cinza parece diferente porque realmente entram quantidades diferentes de luz na retina. Talvez não seja esse o motivo, mas algo me faz crer que o fenômeno não é só interpretativo, mas também físico."

tem a ver com a dilatação de pupila sim, mas a diferença de contrastes nao acontece 100% nos olhos, mas também no cérebro, pois o resultado final da visão é interpretado nele.
para ir direto ao assunto: o primeiro quadro, com fundo branco, que parece ser de 'menos' contraste, na verdade é o que tem mais contraste, nao no texto, mas o contraste da caixa menor com o fundo claro afeta o contraste do texto, pois toma toda a atenção para si. outra forma de explicar seria dizer que, perto do branco de fundo, preto e grafite é tudo a mesma coisa...

obs.: vale lembrar que, calibragem de monitor, frequencia de tela, valores rgb, valores cmyk, papel fosco, plastificação, tudo influencia e em diferentes midias, o branco nao é tao ofuscante quanto na tela...


Discussão
Luís Estevão
20/06/07 às 22:01

Tenho uma sala pintada de rosa. Quero colocar uma manta e almofadas no sofá, sendo a manta de uma cor e as almofadas de outras. Poderia me ajudar e me enviar por e-mail quais cores eu posso usar pra ficar uma decoração legal?

Muito obrigado

Abraços.


Discussão
Tamiris Ferreira Vasco
20/07/07 às 15:24

OLA,SOU BEM BRANQUINHA E GOSTARIA DE SABER SE UM CASTANHO ESCURO COMBINARIA COM A MINHA COR


Discussão
Francisco
07/07/08 às 22:47

Muito bom o Blog...


Virei mais vezes...


:)


Discussão
Marcelo
16/01/09 às 15:15

Muito linteressante estes detalhes, pois eles podem fazer uma grande diferença...

Valeu!

Abs,

Marcelo


Discussão
Fernanda
20/12/11 às 19:46

Nossa...parece um teste psicotécnico.




Comente.






(aguarde que é demorado mesmo...)


Você merece.

Assine nosso conteúdo e receba novidades sem sair de casa!

Atualizado com o Movable Type.

Alguns direitos reservados por Frederick van Amstel.

Apresentação do autor | Consultoria | Portifólio | Política de Privacidade | Contato