Por que não usar preto puro (# 000) e branco puro (#FFF)?


17

Uma nova barra superior para troca de pilhas diz:

A primeira coisa que você notará é que é realmente preto* .

* Jin ressalta que tecnicamente não é totalmente preto: é o número 212121.

Em seu CSS eu vejo,

background: #2f2f2f;
background: rgba(0, 0, 0, 0.8);

Por que não "realmente preto": por que "não é totalmente preto" melhor?

Da mesma forma, para o resto do plano de fundo, vejo algo como:

background: #fdfdfd

Por que não branco puro?

Não estou perguntando especificamente sobre o StackExchange - o que quero dizer é: essa é uma boa regra geral para todos / todos os sites: quando as especificações de design parecem pedir preto ou branco, devo usar quase preto e branco em vez de realmente Preto e branco?

Essa 'regra' também se aplica a outras cores (qual é a regra exatamente)?

A regra depende do dispositivo?


O Google sempre usa fundos em branco puro.
#

Respostas:


18

Em resumo, é fácil para os olhos;

“Simplificando, o contraste é a diferença entre duas cores. Em uma página da web, a quantidade de contraste necessária varia de acordo com as diferentes partes da página. Você geralmente deseja um alto contraste entre o texto e sua cor de fundo. Mas um contraste muito alto entre os elementos do design pode dar uma impressão instável e confusa. Preto e branco criam o maior contraste possível. -Citação daqui

Este é um ótimo site para sugestões / exemplos e teoria de cores de UX. E discute o contraste de cores diferentes no plano de fundo, mesmo fornecendo o código hexadecimal que é bastante útil.

O contraste e o equilíbrio de cores também são discutidos aqui .

Isso também parece ser um estilo que é tendência, porque o menor contraste entre bckgrounds faz o contraste do texto um pouco melhor (na minha opinião) como visto com a cor aqui e aqui Estas amostras são mais para olhar para a cor do que o seu conteúdo em termos do que eu quero comunicar aqui.

Não é necessariamente uma regra mais de preferência ou estilo. É mais dependente do conteúdo do que do dispositivo. É sobre onde você deseja ter mais ênfase ou foco - onde quer que isso aconteça, é onde deve haver mais contraste. No caso do StackExchange, trata-se de perguntas e respostas; portanto, o corpo é onde há mais contraste, pois é onde é mais relevante.

Boa sorte com suas opções de cores no futuro. Essa é outra consideração a ser levada em consideração: D


1
Sei que as respostas aqui devem ser curtas, por isso, obrigado por usar as suas para fornecer links para uma leitura mais detalhada (sou um novato completo).
ChrisW

Fico feliz em ajudar (se apenas um pouco). A resposta para esta pergunta tem 3 componentes principais: teoria das cores, preferência / estilo e design de UX. É impossível cobrir cada um 100% em uma única resposta (como você mencionou). Então, eu só queria dar uma resposta curta, juntamente com uma idéia do que explorar.
Jenna

6

Uma barra superior em preto puro pareceria muito impressionante contra o fundo branco usado por muitos sites, o que é ruim porque o foco deve estar no conteúdo, em vez de chamar a atenção para o topo da tela. Tornar mais claro (cinza) reduz o contraste entre a barra superior e o fundo do corpo.

No entanto, um plano de fundo cinza em qualquer coisa impede a legibilidade, reduzindo o possível contraste entre texto e plano de fundo. O olho humano é mais sensível às diferenças de brilho; portanto, escolher um cinza de 50% significa que, independentemente da cor do texto escolhida, você está usando no máximo metade da diferença de brilho que a tela do usuário pode produzir.

Portanto, acho que a escolha de 80% de preto é um compromisso entre tornar a barra superior menos dissonante e preservar o contraste dentro dela.

Para o corpo do texto, você geralmente não quer usar preto puro contra um fundo claro, a fim de maximizar contraste e assim a legibilidade. (Isso se aplica tanto à tela quanto à impressão.) Observe que a cor de fundo do corpo difere do branco puro apenas um pouquinho. Em geral, os sites geralmente escolhem fundos muito ligeiramente esbranquiçados. Um dos objetivos é tornar o site mais quente ou mais frio, escolhendo um rosa pálido ou azul (aqui é um cinza neutro).


Neste site, mesmo a div.post-textcor do primeiro plano é em color: #111;vez de preto puro. Por que não deixar a legibilidade ou o brilho da tela para o navegador / dispositivo / usuário padrão para otimizar?
ChrisW

0

Na minha opinião ... Apenas moda, tendências.

Se o usuário sentir que as páginas da Web estão machucando seus olhos, ele poderá ajustar o brilho da tela. Nos dispositivos móveis, as pessoas fazem isso o tempo todo.

Há uma tendência de imagens "vintage". Baixa saturação, lavada.

A aparência desbotada pode tornar o ponto mais escuro ou / e o ponto branco cinza.

https://www.google.com/search?q=vintage+photos&client=firefox-b-ab&dcr=0&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjb04iVr6vYAhUj94MKHQ3nBfQQ_AUICigB&biw=1920&bih

Não apenas em fotos, mas também em vídeos ... incluindo vídeos "felizes".

https://www.youtube.com/watch?v=9HjrFnKEE8w

É verdade que muito contraste pode ser irritante, especialmente um fundo escuro com texto em branco ... Lembre-se do design web dos anos 90 , com fundo preto e gifs animados saturados ...

A tendência é ter sites com aparência mais "amigável", mais "íntima", então isso é suavidade. Também pode dar uma aparência mais "cinematográfica", em vez de uma aparência de "TV".

Uma tendência oposta nas imagens é o " visual Hdri " ou estilo draggan, por exemplo, que acentua o contraste e o micro contraste.

Em alguns casos, uma imagem desbotada pode dar a aparência de uma faixa dinâmica mais interna, em comparação com o contraste aprimorado em tom de uma imagem real de alta faixa dinâmica.


Além disso, se toda a sua paleta estiver de alguma forma limitada, você poderá enganar a autobalança do seu olho. Levando ao seu maior alcance dinâmico. Os pintores usam isso o tempo todo.
Joojaa

1
Isso simplesmente não é uma resposta válida. A ciência em torno do contraste, usando preto, usando branco, é apenas isso - ciência, não opinião.
21818 Mike Earley
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.