真假？微信Dark Mode设计不合规范？

━

前言

题中“规范”是 WCAG 2.0 - web内容无障碍指南2.0版（Web Content Accessibility Guidelines）。随着微信这次上线深色模式，去年风靡一时的Dark Mode设计课题又一次站上风口。关于深色模式课题，深入研究之后会发现这近乎是一门玄学，因为我们能找到大量设计优秀的产品为我们指引方向，但同时又不能完全定量地去挖掘那个最精准的设计结果。相关的专题文章已经有很多，本文从部分角度谈谈我自己的理解。

不是标题党，别走。

最近在研究Dark Mode，业余时间把微信各页面截屏测了一下文本色彩对比度。关于这一项指标的合格与否，目前国际通用的参考标准就是前言里这套WCAG 2.0，这是一套由威斯康辛大学麦迪生分校、W3C(万维网联盟)、谷歌等机构研究人员于2008年12月11日编撰发布的web内容无障碍设计指南。

它定义了多项关于听觉、视觉、交互行为等层面的技术标准，能够使残障人士可以顺利的访问网页并成功获取内容。这些标准被量化为AAA、AA、A三种成功等级，如设计都不符合则被认为是Fail。我们通过各种在线对比度测试工具得出的AAA、AA、AA18、DNP这些结果就是整个体系的一部分，感兴趣的同学可以参考下面链接了解W3C授权的译本和原文。

www.w3.org/Translations/WCAG20-zh/

原文 - www.w3.org/TR/WCAG20/

上面图例中4个标签分别对应AAA(对比度不低于7:1)、AA (对比度不低于4.5:1)、AA18(对比度不低于3:1)、红点(未通过)4种状态描述。其中AA18需满足大文本字号的条件，至少为18pt或14pt加粗。

回到标题，我们来放大看看微信的细节。图挺多，下面只放部分关键页面的色彩对比度测试结果，可供大家参考微信不同层级信息的设计逻辑，以及来看看到底有哪些地方未通过WCAG 2.0规范。

大眼看过去，好多小红点●，豪横！

细看对照结果发现，除了 次级辅助说明、input-box提示文本、置灰状态文本以外，其中仍有 多处对比度小于3：1的文本，未通过WCAG 2.0标准。我相信微信团队一定有过审慎的考量，具体原因咱也不敢问，咱也只能从设计角度去逐层探讨。话说回来，WCAG 2.0本质上是一份包容性设计指南，并不是规范红线，遵循这些原则，web内容更容易为广大残疾人士所接受，也可让普通用户更容易访问。

反过来想，微信以内容传播为主的产品属性决定了它的文本层级是丰富的，如果所有文本都符合AA18以上的成功标准(即对比度≥3:1)，势必会导致层级(尤其是辅助说明文案)扁平化，而拉不开视觉优先级，变相增加了页面中的信息密度。猜测还有一种可能性是WCAG 2.0修订于2008年，彼时的屏幕分辨率远低于现在的326ppi、458ppi，因此今天的设备在相同物理尺寸下显示更多像素，增强了清晰度和识别性，所以牺牲了对比度。

因此真的有必要完全遵循这套标准吗？

似乎不是。

那我们需要遵循什么呢？

说到底，我们探讨对比度这项参数，除了体现设计关怀以外，更多是可以用来研究信息层级。既然聊到层级，那就不能放过上面微信深/浅两种模式的对照组了。

大脑趋向于认为同一个页面中相同位置的信息，无论在什么色彩模式/主题皮肤下的层级都应该是一致的，意味着这些文本信息在深/浅两种模式下的对比度应该一致或相似，或至少处于同一个成功标准（WCAG 2.0）。但即便微信这样的国民产品，尚存在深/浅两种模式下对比度不在一个成功标准的情况，我认为依然存在优化的空间，具体位置参照上图中加★的标注（更多加★标注可以上滑看组图）。

━

由对比度引发的思考

一定会有人跳出来说“我觉得微信夜间模式很好用啊，对比度比苹果自带的柔和多了，一点都不刺眼！”没错，对比度降低是可以在弱光环境下起到一定护眼作用，减少眼睫状肌的过度收缩，减缓视觉疲劳。这也大概率是微信为什么没有遵循iOS建议的深色模式配色标准。严格地说，微信Dark Mode做的是夜间模式，而苹果Dark Mode做的是主题风格。

玄学，就玄在这个地方。

苹果很聪明，iOS 13的Dark Mode在去年发布的时候，官方并不曾说这是夜间模式，官网给出的文案也模棱两可，很容易让人理解为这就是苹果的夜间模式，但其实早在2016年iOS 9.3就已经加入了夜览功能，那时候没有深色模式，这个所谓“夜览”开启以后屏幕会点亮一层暖色背光，由于是物理实现，所以截屏无法看到。我用加温滤镜大概模拟了一下，效果是这样。

对比度降了吗？不好说。

护眼吗？护。

暖光可以有效过滤400~450nm的短波蓝光，减少这些高能量光对视网膜黄斑区的损害，我们平时配眼镜用的抗蓝光镜片，也是这个原理。只是我们在白天很少接触到这个波段的蓝光，所以多半情况下，“护眼”模式就被曲解成了“夜间”模式，其实并不绝对。

所以要怎么理解苹果的做法？公认iOS深色模式的最大卖点是节能，因为像素点在显示纯黑的时候不发光。猜测苹果也不会官方发布另一套弱对比的“夜间护眼模式”，那样等于推翻了之前的产品策略，自己打脸。至于你们要的“夜间护眼模式”，你们就用“深色模式+夜览”自己发挥一下吧，反正iOS系统应用也都是工具类APP，20秒用完即走，对吧？

所以深色模式、护眼模式、夜间模式，你们仨互相认识吗到底？

这是整件事最玄的地方。

━

情境

之所以玄，是因为逻辑在同一个次元里无法自洽。

iOS的深色模式是黑底白字的主题皮肤，是兼顾了日夜场景的强对比潮流风格；iOS的护眼模式是增加背光暖屏；iOS的夜间模式是把前两者相加。

微信的深色模式是灰底灰字的设计风格， 一定程度上护眼， 一定程度上适合夜间。

为什么要加“一定程度”？因为关于这事你要是去问眼科医生，他一定会告诉你夜里尽量少看手机，如果一定要看，建议在床头开一盏暖黄小灯。

拆解到这里，我们会发现深色模式、护眼模式、夜间模式，其实就像三种语言，各有自己适用的情境，彼此之间时而包含时而交叉，像不同次元的人在同一个时空偶遇，平行宇宙一样。如果试着简要概括一下各个情境下的属性和差异，结论大概是这样：

深色模式 → 是一种以省电为核心优势的主题风格，视觉体验独特，使用较强的色彩对比度以保证在强光环境下也能轻松识别内容。在该模式下需要满足护眼的设计标准，或保留护眼参数的配置入口。 

夜间模式 → 为夜间及弱光环境而设计的深色基调界面，使用推荐尼特值范围的背景色与前景色（可参考腾讯ISUX之前总结过的一套设计方法），使用较弱的色彩对比度降低对眼睛的刺激，达到护眼目的。

护眼模式 → 需要同时兼顾日夜的强弱光环境影响， 采用符合要求的显示屏和较弱的屏幕亮度、色彩对比度以满足降频闪、抗蓝光等护眼需求，在深/浅两种模式下都需要考虑护眼的需求。

━

色彩语言

厘清三者之间的脉络，就能快速抓取我们需要的情境设计准则，这有助于我们在不同模式下更准确地定义信息结构如何组织、视觉层级如何表现。而在决定层级关系的诸多因素中，色彩是一项关键因子。

苹果在其开发者网站中提供了iOS 13的UI Design Resources源文件，在调取深/浅两种模式下的色值之后，我们可以细究苹果的色彩配置特点。

附传送门，方便下载↓

developer.apple.com/design/resources/

这一版本的微信，尤其在有彩色体系上并没有采用苹果的建议配色，也没有使用分级调节透明度、添加背景色遮罩等操作，而是推出了一套独属的色彩语言。

微信还是心思很细腻地 将icon体系的有彩色做分级处理，通讯录tab内的4大功能入口icon是面型，层级和视觉分量要远远高于发现tab和我tab内的线性icon，所以在深/浅两种模式下保持统一的色值，保留他们的色彩识别性，避免用户产生视觉记忆断层，影响功能引导。

而其他tab的线性icon是对文本标题的辅助表达，只作语义化说明，层级非常弱，因此在深/浅两种模式下配置了两套适合环境氛围的色值。我们看下部分有彩色组件的样本取色结果（色值来源于截屏，非官方），品一下其中的设计逻辑。

全局看两套配色的差异还是挺大的，比iOS 13的明显多了。“朋友圈”icon的8种颜色甚至连色相都可以不一样。仔细对照还能发现一些端倪，比如“搜一搜”和“支付”icon在深/浅两种模式下的色值完全一样，而其他的icon色值在两种环境中都不同；以及“收藏”和“卡包”icon的蓝色色值在浅色模式下不统一。

很难说微信是刻意为之还是规范没有维护好，如果有微信的朋友看到这里，希望可以多多纠错，大家也可以接着这个话题继续往下思考。

━

最后

本期聊了这么多，从WCAG 2.0概述开始引出微信深色模式下色彩对比度的设计分析；顺着这个话题挖掘深色模式、夜间模式、护眼模式三者的定位差异和情境设计准则；最后回到微信的设计，聚焦色彩体系在深色模式下的层级表达特点。看似涵盖了很多维度信息，其实对比度也好，情境也好，色彩也好，实际都是围绕一个问题在兜转：产品的结构逻辑、组织原则和信息层级关系。

在深色模式这个话题启动之前，有朋友劝过我慎写，如果要挨个产品逐层拆解，掰开揉碎了讲，真的够写上半个月。做过Dark Mode或者将来要做的朋友，希望本期内容可以为你们提供一些不一样的思路，在深色、夜间、护眼三种情境中找出适合自己产品诉求的设计方向，或许是提高整体效率的第一步。