灰色，在各种色调中都经常被用到。它们变成各种元素，融入到你设计的页面中。深灰色通常用于标题和正文。浅灰通常用于数据输入，标签和描述。

       但是，其中，浅灰色很容易被滥用。

浅灰色文本常见问题    

      太亮的灰色文本会影响到文字的可读性。灰色太亮会导致文本融入浅色背景，这使得每个字看上去很微弱，难以区分。试图是读取它又会导致眼睛疲劳。

       用在导航或者菜单上时也要谨慎。如果用户都不能读取你的菜单中的选项，他们很可能会点错。更令人郁闷的是，太浅的灰色还可能产生误解，因为它经常表示“禁用”。

      低对比度的文字不仅影响普通用户更容易影响低视力和老年用户。不仅如此，有些用户使用的是低分辨率显示器，或者在移动设备上或光线不足的阅读。低对比度的文字影响真的非常大。

46%的亮度    

      光知道灰色过浅的弊端是没有用的，“过浅”是一个相对的词，所以我们必须限定一个标准。那么，

       “什么是过浅？”

       万维网联盟（W3C），国际网络标准组织，发布了WCAG 2.0。他们制定了文本访问的规则。WCAG 2.0建议普通大小的文本应具有至少为4.5：1的对比度。

       灰色是没有色相和饱和度，亮度只有唯一的颜色。亮度越高，灰色越浅。颜色的校准用百分比区间表示：

       白色背景上的灰色文本亮度不应超过46％（＃767676）。那反过来也是如此，作为白色字体的背景色，灰色亮度同样不能超过46%。

  58%的亮度 ——针对于字体大小“18+”的文本   

       对于字体大小超过18的文本，这个标准稍有不同。最高亮度提高到了58%。因为大尺寸的文字本身更容易阅读

       同样的，你在白色背景上的灰色文本不应该超过58％的亮度（＃949494）。白色字体的灰色背景色亮度也不能超过58%。

   浅灰色背景阈值  

      上述阈值适用于在白色背景上的文本。如果你把灰色的字放在灰色的背景上，就需要让你的文字更暗。

       浅灰色的背景不得低于90%的亮度（＃E6E6E6）。按照4.5:1的比例来算，那么普通大小的文本灰色阈值在40％亮度（＃666666）；18+以上大小的字体为50％（＃7F7F7F）。在浅灰色背景下，你的字体亮度不应该超这些值。

”过浅“的意思  

       设计师选择浅灰色文本肯定不是为了使其可读性变低，是想用它来突出文本。但问题出现时，他们没有意识到自己的浅灰已经影响到了用户的体验。

       WCAG 2.0对比度规则为“过轻”制定了一个特定的标准。 “过浅”已不再是一个模糊的概念。现在当设计师们再次从用户听到灰色文本太浅时，他们终于有了一个参考点。

  扫码手机看