《产品经理配色的用户体验——颜色对比度》由会员分享，可在线阅读，更多相关《产品经理配色的用户体验——颜色对比度（3页珍藏版）》请在金锄头文库上搜索。
1、编辑导语：我们在使用手机和电脑时，长期的使用会让我们眼睛感到疲劳，所以一个柔和的舒适的画面很重要；比如手机和电脑的屏幕可以设置夜间模式，在晚上看手机可以舒缓一点；本文作者对配色中的颜色对比度做出了分析，我们一起来看一下。我猜在你踏入设计这个圈子的时候，一定有被推荐过Robin Williams 的写给大家看的设计书 复杂的设计原理在书中被凝炼为亲密性、对齐、重复和对比四个基本原则。但其实我今天要说到的内容和这本书的关系不大，我只是想引出对比这个概念，在设计中有多么基础且重要。前面我在中提到过，Google Design对于文本框可用性研究的主要发现，其中有一条是：文本框的底部线条与背景的颜色对
2、比度最小应为 3： 1；因为有足 够的颜色对比才能够让控件在场景中具有更高的易见性。但你是否真的了解颜色对比度的概念？这个值为什么是 3： 1，又应该怎么得到 3： 1？颜色对比度对我们在设计过程有什么影响，能起到什么作 用？这个问题其实很容易解答。在硬件设备制造商繁多的当下，产品设计者其实是无法确保每一个用户在使用你的产品时，所看到的界面和设计师在显示器上看起来的一样完美。总会有用户使用的是显示性能较差的设备。甚至你需要考虑的还不仅仅是设备因素，产品的使用环境（室外或昏暗室内）、主流用户群体的视力情况等等，都可能要求你做到更加无障碍的视觉体验。否则很可能在真实的使用场景中，你的产品几乎没法使
3、用。但仅凭设计师的经验进行判断当然是不现实的，于是乎业界便诞生了WCAG （ Web Content Accessibility Guideline， Web 内容无障碍指南）标准；虽然该标准是为了满足有视觉障碍用户的视觉体验，但满足该标准后，同样也能帮助普通用户更方便地使用。实际上 WCAG 中还包含了许多无障碍设计标准条例，从视力、听力、运动和智力等诸多方面指导产品设计者做出更加易于使用的产品。但今天我主要提炼出颜色对比度无障碍标准这一项来说一说。通过阅读性能评估，色相和饱和度对可读性的影响其实很小，甚至没有；真正影响阅读性能的其实是颜色明度造成的颜色对比度（颜色明度的概念，我在有提过，在
4、这里就不再赘述了）。WCAG 颜色对比度标准定义的目的是让文本和背景之间存在足够的对比度，确保绝大范围视力程度的人群都易于阅读；也就是说，符合WCAG 该标准的文字或图像，将有足够高的色彩对比度，使之很容易地从背景中被辨识出来。WCAG 制定了两条标准条例，分别是 1.4.3条例：对比度（最小）标准（即 AA 标准）和 1.4.6条例：对比度（加强）标准（即 AAA 标准）；AAA 标准比 AA 标准要更加严苛，适合视觉要求更严格的产品类型。两条标准的定义分别为：备注：1大文本：WCAG规定18p常规字重的文本或学14p字重加粗的文本为大文本。我们在 iOS 人机交互规范和 Material
5、Design 指导规范中，可以看到有许多颜色对比度指标都是履行WCAG 标准的。例如：我们前面说到的文本框的底部线条与背景的颜色对比度最小应为3： 1，以及 MD 规范中暗黑模式下明度对比至少4.5： 1；这些数据，均是来自 WCAG 标准。(温馨提示：数学不好的朋友可以直接跳到下一节使用便捷工具)了解了数据指标后，我们就该探索颜色的对比度是如何计算得出的了。该公式可以在 WCAG 标准中可以找到：对比度 = ( L1 + 0.05) / ( L2 + 0.05)其中：L 指颜色的相对亮度相对亮度 L=0.2126 * R + 0.7152 * G + 0.0722 * B其中 R, G ,
6、B 取值为：若 XsRGB =0.03928 WJ X=XsRGB/12.92 ;否则X=(XsRGB+0.055)/1.055) A 2.4XsRGB 在此指代 RsRGB, GsRGB,或 BsRGB,取值为 XsRGB=X8bit/255 X8bit 指 R、 G、 B 通道各自在8位/通道下0-255 的取值。我建议不用过多地去纠结公式底层的逻辑，比如0.2126这样的数据是怎么来的。毕竟通过官方给出的公式，已经足够用于计算颜色对比度了；通过我前期的调研，这些数据的来源结合了色系坐标系、矩阵运算等等一系列的演变；特别感兴趣可以去查查，篇幅原因我就不在此做过多赘述了。举个例子：计算纯黑色
7、RGB ( 0,0,0)的文本与纯白色RGB( 255,255,255)背景的对比度。根据上面的例子，我们不但知道了如何计算两个颜色的对比度，同时也得出了：颜色中对比度的最大值为 21:1(纯黑与纯白)的结论。上面如此复杂的公式，确实不可能每一次都通过手动计算去得到对比度；好在现在已经有许多在线工具已经可以辅助我们完成对比度校验的工作了，比如有类似 WebAlM s Color Contrast Checker这样的单色对比度工具，或者类似 EightShapes Contrast Gri退样的色组对比度工具。有了这样的快捷工具，我快速验证了 iOS 与 MD 两个规范的颜色可用性。由图中可以
8、看出， iOS 规范直接在纯黑色背景层上使用了纯白文字，将颜色对比度拉到了出人意料的最大值。这似乎和我们之前的常规认识有点不同：就像我们在设计浅色模式时，在白色背景下不会使用纯黑文字；在黑色背景下也不会使用纯白色字体。这或许是因为苹果在推出深色模式之初，所希望打造的就是一个不论在白天和夜晚都可以使用的色彩模式，而不是仅为弱光环境打造的 “夜间模式” ；它需要同时兼容不同光线情况下人眼对于光线的捕捉，从这一点上来讲，深色模式的设计会比夜间模式更难，不是单纯的降低对比度就可以的。而MD在色彩对比度上的设计比iOS保守一点，在背景色的选择上更偏爱深灰色。在深灰色背景上使用浅色字体的对比度会比在黑色背景上低，更有助于减少用眼疲劳。在设计上， MD 更常用阴影来表现层级关系，在更换为深色模式时，系统会保留默认的阴影，使用深灰色背景也更容易看到这些灰色阴影；官方定义对于深色表面和白色文本的对比度至少为 15.8:1。不得不说，颜色对比度的细节确实很难把握，但也从细节体现出了一个设 计师的耐心与深入程度。最近逐渐流行起来的暗黑模式就特别讲究对比度的推敲。我记得微信暗黑模式刚推出时，饱受诟病，被很多网友说辣眼睛；后 来一位同行随即分析了原因，得出的结论就是因为颜色对比度的把控没有做到 位，导致用户长时间看对比度较弱的界面，造成视觉疲劳。当然现在微信团队 已经逐步进行了优化。
