做好Dark Mode 中的对比度设计，我们需要注意什么？

『夜。 2023-07-23 02:45:45

在深色模式的设计中，对比度是十分重要的，合适的对比度可以保证产品具备可用性和易用性。深色模式需要兼顾光线强弱两种条件下用户对于内容仍然能够充分进行识别，还要避免在弱光线环境中受到眩光的影响。可以说，对比度控制的好不好，影响着用户的使用体验。

01 从平台指南了解对比度设计

1. iOS

在iOS人机界面色彩准则中，给出了深色灰阶。

由图中可以看出，iOS的规范指南将最大对比度拉到了出人意料的最大值，直接在纯黑色背景层上使用了纯白文字！

这似乎和我们之前的常规认识有点不同：就像我们在设计浅色模式时，在白色背景下不会使用纯黑文字；在黑色背景下也不会使用纯白色字体。

这或许是因为苹果在推出深色模式之初，所希望打造的就是一个不论在白天和夜晚都可以使用的色彩模式，而不是仅为弱光环境打造的“夜间模式”。它需要同时兼容不同光线情况下人眼对于光线的捕捉，从这一点上来讲，深色模式的设计会比夜间模式更难，不是单纯的降低对比度就是对的。

同时Apple提供了9种预定义的系统颜色，这些颜色是经过精心选择以保证在不同模式之间能保持一致的感觉。

而对于除系统颜色以外的自定义颜色，官方给出的对比度建议是7:1。

2. Material Design System

Google在色彩对比度上的设计比Apple保守一点，在背景色的选择上更偏爱深灰色。

在深灰色背景上使用浅色字体的对比度会比在黑色背景上低，更有助于减少用眼疲劳。在设计上，谷歌常用阴影来表现层级关系，在更换为深色模式时，系统会保留默认的阴影，使用深灰色背景也更容易看到这些灰色阴影。

官方定义对于深色表面和白色文本的对比度至少为15.8:1。

3. WCAG

WCAG全称为Web内容无障碍指南，其中包含分为可感知性、可操作性、可理解性、可兼容性和一致性五大类的相关建议，这些建议可使网站内容更容易访问。iOS人机界面准则以及Material Design System都是基于WCGA之上。其中关于色彩对比度的部分，分别是条例1.4.3、1.4.6、1.4.11。这边仅简述，有兴趣的可以自行搜索一下全文。

对于最小对比度（AA级）：文本及文本图像至少需要4.5:1的对比度；大号文本及大号文本图像则至少要3:1的对比度。
加强对比度（AAA级）：文本及文本图像至少需要7:1的对比度；大号文本及大号文本图像则至少要4.5:1的对比度。
非文本对比度（AA级）：用户界面组件及图形图像等在视觉呈现时，与相邻颜色的对比度至少为3:1。

02 根据产品差异选择合适的对比度

以上平台设计指南给出的终究只是一个建议参考，在深色模式的设计中，除了要考虑适配平台规则之外，更应该思考的是适用于产品的定位和使用场景。

1. 钉钉

钉钉的整体深色模式设计很明显更偏向于适配iOS设计。

从上图可知，在主要文字信息的对比度上已经大于了15.8:1，其他颜色的对比度也大于4.5:1。其中整个页面的最大对比度达到了满值。

钉钉从产品上说属于工具型的产品，使用场景更多是在企业办公，为了让信息内容突出，加大对比度的刺激可以保证用户在使用时更为清晰，更为高效。

2. 微信

微信在深色模式设计中并未使用iOS官方模式。而是降低了整个页面的对比度，整体以较为灰暗的样式呈现。

可以看到文字信息的对比度仅大于7:1。更多的是考虑微信的聊天场景中，用户可能长时间沉浸式使用。这里微信将深色模式与夜间模式进行了兼容，避免大的对比造成强烈的视觉刺激，可以在深夜环境下获得更好的感知度。

以上两者在深色模式的设计上差异虽然较大，但其宗旨都在于为用户服务，都是在充分考虑使用场景及定位之后，希望提供更为良好的用户体验。所以深色模式中的对比度设计不应该死搬硬套平台规范指南，更多的还需要分析自身产品的特性，适合的才是最好的。

03 对比度的计算

在对对比度设计有了一定了解之后，怎么才能知道自己选择的颜色对比度是多少呢？其实对比度是通过色彩的相对亮度来计算的。在WCAG中已经告诉了我们相对亮度的计算公式：

For the sRGB colorspace, the relative luminance of a color is defined as

L = 0.2126 * R + 0.7152 * G + 0.0722 * B

where R, G and B are defined as:

* if RsRGB <= 0.03928 then R = RsRGB/12.92 else R = ((RsRGB+0.055)/1.055) ^ 2.4

* if GsRGB <= 0.03928 then G = GsRGB/12.92 else G = ((GsRGB+0.055)/1.055) ^ 2.4

* if BsRGB <= 0.03928 then B = BsRGB/12.92 else B = ((BsRGB+0.055)/1.055) ^ 2.4

and RsRGB, GsRGB, and BsRGB are defined as:

* RsRGB = R8bit/255

* GsRGB = G8bit/255

* BsRGB = B8bit/255

上面的R8bit、G8bit、B8bit其实就是我们色彩面板中显示的通道数值。这里要注意，这里使用的色彩文件需要是sRGB色彩。