为什么你的灰色文字亮度不能超过46%?

灰色可以有很多个层次。你可以在大多数网站的不同元素中发现它们。深灰经常用作标题和文本颜色,浅灰通常用作元数据,标签和描述性文字。但浅灰色经常被人们滥用。

浅灰色文本的问题

太浅的灰色会带来可读性的问题。如果你将灰色设置得太浅,用户就会感到阅读困难。颜色的亮度使得它和浅色背景融为一体,这会让字和单词发虚,难以辨认,带来视觉疲劳。

浅灰色也会带来导航问题。如果用户不能看清菜单上的选项,他们可能会选错,或者根本就不点。当菜单比较复杂时,这种情况尤其让人沮丧。有时候他们可能不会点击某个按钮,因为它看上去像是不能点的。

文本对比度太低,不光影响普通用户,对弱视和老年用户的影响尤其大。有些人的显示器分辨率太低,有些人使用移动设备观看,或者光线条件不好。这样文本对比度就会对所有人造成影响。

46%的亮度

了解浅色对比度的问题还远远不够,你需要明白多浅的颜色才算浅色。因为没有一个标准,所以浅色其实是一个相对的概念。

W3C发布的WACG2.0中推荐常规字号的字体使用的对比度比例至少为4.5:1.

灰色是唯一没有色相和饱和度的颜色,它只有亮度。亮度越高,灰色越浅。亮度由百分比数字控制。

在白色背景上应用灰色文本意味着文本亮度不能超过46%(#767676)。这是你在不破坏对比度的前提下可以使用的最大亮度,反过来也是一样。一个灰色背景上使用白色文字,那么白色的亮度也不能超过46%

针对大字号的58%亮度

对于大字号文本,你可以让灰色更浅一些。这是因为大字号文本易于阅读。白色背景上的灰色文本亮度不能超过58%(#949494)。

浅灰色背景上的阈值

上文中的阈值都针对的是白色的背景,如果你把文字放置在浅灰色背景上,那么你需要把文本颜色调得更深一些。浅灰色背景是指亮度不小于90%(#E6E6E6)的背景。这样4.5:1的比例来算,常规大小文字的颜色阈值就是40%的亮度(#666666)。对于大号文字,阈值是50%的亮度(#7F7F7F)。你的文本亮度不能超过这个值。

“太浅”的含义

设计师不会故意选择浅色让用户产生阅读障碍,他们使用浅色只是为了让文本和背景区分开。但是当他们没有意识到选择的颜色过浅时,问题就出现了。

WACG2.0提供的对比度给设计师一个“太浅”的定义,这个问题再也不是一个不实际的感官问题。如今设计师听到用户抱怨文本太浅看不清时,他们有了一个很好的理论参考。

2 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部