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.