为什么不使用纯黑色(#000)和纯白色(#FFF)?


17

堆栈交换的新顶栏说,

您会注意到的第一件事是它真的是黑色的*

* Jin指出,从技术上讲,它不是很黑:#212121。

在CSS中,我看到了

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

为什么不“真的黑”:为什么“不是很黑”更好?

同样,在其他背景下,我看到类似

background: #fdfdfd

为什么不纯白色?

我不是专门问StackExchange的-我的意思是说,这是对任何/所有网站都适用的一般规则:当设计规范似乎要求使用黑色或白色时,我应该使用黑色还是白色,而不是真正使用黑色或白色。黑与白?

这个“规则”是否也适用于任何其他颜色(确切的规则是什么)?

规则是否取决于设备?


Google始终使用纯白色背景。
Pacerier '16

Answers:


18

简而言之,在眼睛上很容易。

简而言之,对比度是两种颜色之间的差异。在网页上,所需的对比度量随页面的不同部分而变化。通常,您希望文本与背景颜色之间具有高对比度。但是,设计元素之间的对比度过高可能会给人以不稳定的印象。黑白可以产生最高的对比度。” -从这里报价

是一个有关UX颜色建议/示例和理论的好网站。并讨论了背景上不同颜色的对比度,甚至给出了非常方便的十六进制代码。

对比和色彩平衡也在这里讨论。

这似乎也是一种趋势,因为bckgrounds之间较低的对比度使文本的对比度更好(在我看来),如此此处的颜色所示。这些示例更多地是为了查看颜色而不是其内容。我想在这里交流的条件。

不一定更多是偏好或样式。它更依赖于内容,而不是依赖于设备。这是关于您最想强调或关注的地方-碰巧出现的地方应该是最有对比感的地方。在StackExchange的情况下,所有内容都是关于问题和答案的,因此主体是最有针对性的地方,也是最相关的地方。

祝您以后的颜色选择好运,这是要考虑的另一项问题:D


1
我知道这里的答案必须简短,因此感谢您使用您的链接来提供更详细的阅读链接(我是一个新手)。
ChrisW

乐于提供帮助(如果只有一点)。这个问题的答案包含3个主要组成部分:色彩理论,偏好/样式和UX设计。正如您所提到的,不可能每个答案都覆盖100%。因此,我只想给您一个简短的答案,并附上您的探索思路。
珍娜

6

纯黑色的顶部栏在许多网站使用的白色背景下看起来非常醒目,这很糟糕,因为焦点应该放在内容上,而不是将注意力吸引到屏幕顶部。使其变亮(灰色)会降低顶部条和主体背景之间的对比度。

但是,任何事物上的灰色背景都会降低文本和背景之间可能的对比度,从而影响可读性。人眼对亮度差异最敏感,因此,选择50%的灰度意味着无论选择哪种文本颜色,您最多使用的是用户屏幕产生的亮度差异的一半。

因此,我认为80%黑色的选择是在减少顶部条的震颤和保持内部对比度之间做出的折衷。

对于正文,您通常确实希望在浅色背景上使用纯黑色,以最大程度地提高对比度并从而提高可读性。(这适用于屏幕和打印。)请注意,主体的背景颜色与纯白色仅相差很小。通常,网站通常会选择非常偏白的背景。一个目的是通过选择浅粉红色或蓝色(虽然这里是中性灰色)使站点感觉温暖或凉爽。


在此站点上,即使是div.post-text前景色也不是color: #111;纯黑色。为什么不将可读性或屏幕亮度留给浏览器/设备/用户默认值进行优化?
ChrisW

0

我认为...只是时尚,趋势。

如果用户感觉网页在伤害他的眼睛,那么他或她就可以调整屏幕的亮度。人们在移动设备中一直都在这样做。

有一种“老式”图像的趋势。低饱和度,被洗掉。

褪色的外观可能会使最暗的或/和白色的点变为灰色。

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=1007

不仅在照片中,而且在视频中……包括“快乐”视频。

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

的确,很多对比度可能会令人讨厌,尤其是带有白色文本的深色背景...记住90年代的网页设计,带有黑色背景和过饱和的动画gifs ...

趋势是拥有更多“友好”外观的网站,更“亲密”,因此这是柔软的。它还可以给出更“电影化”的外观,而不是“ TV”外观。

图像中一种相反的趋势是“ Hdri look ”或Draggan风格,例如,强调对比度和微对比度。

在某些情况下,与真实的高动态范围图像的色调映射增强的对比度相比,褪色的图像可以使外观具有更大的内部动态范围。


同样,如果整个调色板都受到限制,您就可以愚弄眼睛的自动平衡功能。导致更高的动态范围。画家一直在使用它。
joojaa

1
这不是一个有效的答案。在科学周围的对比度,采用了黑色,白色,它只是-科学,而不是意见。
Mike Earley '18
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.