我猜你踏入设计圈的时候，一定是被罗宾威廉姆斯推荐的《写给大家看的设计书》。复杂的设计原则被浓缩为四个基本原则：亲密、对齐、重复和对比。但其实我今天要讲的和这本书关系不大……我只是想介绍一下“对比”这个概念，它在设计中是多么的基础和重要。GoogleDesign对文本框的可用性研究的主要发现之一是：文本框底线与背景的颜色对比度至少应为3:1。因为有足够的颜色对比，可以让控件在场景中有更高的可见度。但是你真的了解色彩对比的概念吗？为什么这个值是“3:1”，我们应该如何得到“3:1”呢？色彩对比对我们的设计过程有什么影响，又能起到什么作用？为什么？有个“对比标准”这个问题其实很好回答。在现在硬件设备厂商众多的时代，产品设计师无法保证每个用户在使用你的产品时，看到的界面和设计师在显示器上看到的一样完美。总会有用户使用显示性能不佳的设备。甚至你不仅要考虑设备因素，还要考虑产品的使用环境（室外或黑暗的室内）、主流用户群体的视力等，可能需要你达到更无障碍的视觉体验。否则，很有可能在真实的使用场景中，你的产品几乎是一无是处……当然，仅凭设计者的经验来判断是不现实的。于是，业界诞生了WCAG（WebContentAccessibilityGuideline，网页内容无障碍指南）标准。虽然这个标准是为了满足视障用户的视觉体验，但也可以帮助普通用户在达到标准后更方便地使用。事实上，WCAG还包含很多无障碍设计标准和规定，从视觉、听觉、运动、智能等多个方面指导产品设计者做出更易用的产品。不过今天我主要是把“色彩对比无障碍标准”抽出来说说。颜色对比度可访问性标准通过阅读性能评估，色调和饱和度实际上对可读性影响很小或没有影响。真正影响阅读性能的，其实是色彩亮度带来的色彩反差。WCAG颜色对比度标准定义的目的是让文本和背景之间有足够的对比度，以确保具有广泛视觉水平的人可以轻松阅读。也就是说，符合WCAG标准的文字或图片，都会有足够高的色彩对比度，从背景中很容易被识别出来。WCAG制定了两个标准规定，分别是《规定1.4.3：对比度（最小）标准》（即AA标准）和《规定1.4.6：对比度（增强）标准》（即AAA标准）。AAA标准比AA标准更为严格，适用于视觉要求更为严格的产品类型。这两个标准定义为：1.4.3对比度（最小值）：普通文本的视觉表现与背景的对比度必须至少为4.5:1，而大文本1的对比度必须至少为3:1到背景。1.4.6对比度（增强）：普通文本的视觉呈现与背景的对比度至少为7:1，大文本1与背景的对比度至少为4.5:1。备注：1大文本：WCAG规定“≥18ptregularweight”文本或“≥14ptbold”文本为大文本。在iOS人机交互规范和MaterialDesignGuidelines中，我们可以看到有很多符合WCAG标准的颜色对比指标。例如：我们前面提到的“文本框底线与背景的颜色对比度至少要达到3:1”，而在深色模式下“亮度对比度至少要达到4.5:1”医学博士规范。这些数据均来自WCAG标准。颜色对比如何计算（温馨提示：数学不好的朋友。。。可以直接跳到下一节使用方便的工具。。。）了解了数据指标后，我们就来探究一下颜色对比是怎么算的计算。公式可以在WCAG标准中找到：对比度=（L1+0.05）/（L2+0.05）“其中：L指的是颜色的相对亮度”相对亮度L=0.2126*R+0.7152*G+0.0722*B其中R、G、B取值：如果XsRGB<=0.03928则X=XsRGB/12.92；otherwiseX=((XsRGB+0.055)/1.055)^2.4这里的XsRGB指的是RsRGB、GsRGB或BsRGB，取值为XsRGB=X8bit/255"X8bit是指8bits/channel中0-255的取值分别为R、G和B通道。”我建议不要太在意公式的底层逻辑，比如0.2126这样的数据是怎么来的。毕竟官方的公式已经足够计算颜色对比度了。通过我之前的研究，这些数据的来源结合了色系坐标系、矩阵运算等一系列演化，如果你特别感兴趣可以去看看，这里就不赘述了空间原因。根据上面的例子，我们不仅知道了如何计算两种颜色的对比度，还得出了颜色中最大对比度为21:1（纯黑和纯白）的结论。对比工具和例子来验证上面这么复杂的公式，确实不可能每次都通过人工计算得到对比度……好在网上已经有很多工具可以辅助我们进行对比验证工作，比如WebAIM的Color对比像Checker这样的单色对比工具，或者像EightShapesContrastGrid这样的颜色组对比工具。有了这样一个快捷工具，我很快就验证了iOS和MD这两个规格的颜色可用性。从图中可以看出，iOS规范直接在纯黑色的背景层上使用了纯白色的文字，将色彩对比拉到了意想不到的最大值。这似乎与我们之前的常规理解有点不同：就像我们在设计灯光模式时，不会在白底上使用纯黑色文字；我们也不会在黑色背景上使用纯白色字体。这可能是因为苹果在推出深色模式时，想要打造的是一种白天和夜晚都能使用的色彩模式，而不是专为弱光环境打造的“夜间模式”。它需要兼容人眼在不同光照条件下对光的捕捉。从这点来看，深色模式的设计会比夜间模式更难，不能简单的降低对比度。MD在色彩对比设计上比iOS保守一点，在背景色的选择上偏向于深灰色。在深灰色背景上使用浅色字体的对比度低于黑色背景，这有助于减轻眼睛疲劳。在设计上，MD更多的是用阴影来表达层级关系。当改为深色模式时，系统会保留默认的阴影，在深灰色背景下更容易看到这些灰色阴影。官方定义是黑色表面和白色文本的对比度至少为15.8:1。结语不得不说，色彩对比的细节确实很难把握，但也从细节处体现了一个设计师的耐心和深度。最近越来越流行的“深色模式”特别注重对比的深思熟虑。记得微信的“深色模式”刚上线的时候，被很多网友诟病，被很多网友诟病……后来有同事分析原因，得出结论是因为对色彩对比度的控制不到位，导致用户长时间看对比度弱的界面，造成视觉疲劳。当然，微信团队也在逐步优化。由于篇幅原因，我这里只为大家科普一下色彩对比的概念。后面我会继续和大家分享MD团队是如何完成“深色模式”配色推敲的，以及如何通过色彩对比来验证你的产品配色。
