深色模式下的公众号排版：读者开夜间模式时，你的版式还成立吗

深色模式对公众号排版的影响可以概括成一句话：文章底色和文字颜色会被整体反色，图片不会。 后果是那些刻意做得「轻」的设计最先失效——#fafafa 的浅灰背景块反色后和正文底几乎同色，曾经靠底色区分出来的引用、结论卡、代码块会全部糊回正文；反过来，大面积的纯黑底块会变成刺眼的纯白块。公众号后台没有深色模式开关，能不能在两种模式下都读得下去，完全由排版本身决定。下面是五条可执行规则。

深色模式是怎么作用到公众号文章上的

先把机制说清楚，因为「该改什么」完全由它决定。

读者手机开启深色模式后，微信跟随系统把整个界面切成深色。公众号文章走的是整体反色的路子：白底变黑底、黑字变白字，而不是由作者另外提供一套深色配色。这意味着：

两个推论值得强调。

第一，明度差比颜色本身更重要。 你选的是深蓝还是深绿，反色之后都可能变成某种难以预期的浅色；但「这个块和正文底之间的明度差有多大」这个关系是保住的。所以设计背景块时要看明度差，不要看色相。

第二，图片是唯一不受反色控制的东西。 一张白底带字的截图，在深色模式下会在黑底页面上形成一块刺眼的白斑——这是手机端截图类内容最常被投诉的问题之一。

会在反色后失效的四种做法

贴边的浅底块。 用 #fafafa、#f8f8f8 这种「差一点才看得见」的底色来做引用块、结论卡、代码块，在浅色模式下靠大面积成块还能勉强看出边界，反色之后这个微小的明度差被压掉，整块直接消失。背景块与正文底的明度差要够大：浅色模式下用 #f0f0f0 以下的白度，或者干脆加一条边框线来兜底。

极浅的分隔线。 #efefef 这类线在深色模式下几乎不可见。表格尤其明显——如果整张表的可读性依赖网格线，反色后就只剩一堆对不齐的短句。对策是让表格不依赖竖线：靠列的对齐、靠表头的字重、靠行与行之间的留白来建立结构。

大面积纯黑底。 黑底白字的「数据卡」「大字金句」在浅色模式下很醒目，反色之后变成纯白底黑字，在一片深色里就是一块发光的方块。如果要用深色底块，缩小面积并加圆角，让它在反色后仍然是一个可控的形态，而不是半屏的亮块。

只靠颜色区分的状态。 比如用红色表示「涨」、绿色表示「跌」，或者用一个彩色小圆点表示分类。颜色一旦过了反色这道工序就不再受控，关键信息必须同时有文字或符号承载。这一点其实和可访问性设计的要求是同一件事——不要只靠颜色传达信息。

让版式在两种模式下都成立的五条规则

1. 背景块的明度差要明显。 要么明显比正文底浅（浅色模式下能一眼看出），要么明显更深。避免「差一点点」的中间色。
2. 加边框兜底。 任何靠底色区分的块，额外给一条 1px 的内联边框。底色在深色模式下失效时，边框还在。
3. 表格不依赖竖线。 只画横向分隔线，或者干脆不画线，用行距和对齐区分。这同时让窄屏上的表格更好读。
4. 深色底块控制面积，并配圆角。 一条短的金句可以用黑底白字，半屏的整块不行。
5. 关键信息不靠颜色单独承载。 涨跌加箭头或「涨／跌」字样，分类加文字标签。

还有一条属于工作流程而不属于样式：交付前在手机系统深色模式下真机看一遍。 不同微信版本、不同机型对反色的处理并不完全一致，桌面端预览也不能替代真机。这件事没有捷径——它是这套规则里唯一能给出确定答案的办法。

一个反直觉的推论

深色模式逼出来的这些规则，最后提高的是浅色模式下的排版质量。

明度差要够大、表格不靠线、关键信息不靠颜色、深色块控制面积——这四条在浅色模式下执行，会让版面更清爽；在深色模式下执行，会让版面不塌。它们不是两套要求，是同一套要求在不同底色下的表现。

反过来，如果一个版式在深色模式下塌了，通常意味着它在浅色模式下也是靠「微弱差别」在撑——只是浅色模式下有足够宽的色域让这个微弱差别勉强可见。深色模式只是把这个隐藏的问题暴露出来。

常见问题