3.1 深色模式与阅读表面

本页面借助 AI 辅助翻译。英文原文为权威版本。

在屏幕排版史的大部分时间里，阅读表面只有一种：浅色底上的深色文字，模仿纸张。深色模式改变了这一点。短短几年间，它从小众的开发者偏好变成每个主流操作系统的系统级设置，如今读者在打开页面之前，就已经告诉设备自己想要哪种极性。排版必须在两种表面上都给出答案。

极性研究的结论

显示极性——文字是亮底暗字（正极性）还是暗底亮字（负极性）——自 CRT 时代起就有人研究，结论相当一致。在普通光照下的持续阅读中，正极性通常测得更好：关于校对、视敏度和阅读速度的研究倾向于支持浅色背景上的深色文字。主流解释是生理性的：明亮的表面使瞳孔收缩，较小的瞳孔产生更锐利的视网膜成像和更大的景深；暗底亮字则使瞳孔扩张，成像随之变得柔散。

这是普遍情形，而非放之四海皆准。至少在三种情况下，深色模式实至名归：

• 低环境光。 暗室中的亮白页面刺眼、破坏暗适应，可能造成真切的不适。在昏暗环境中，负极性减少了屏幕与环境之间的失配。
• 畏光与光敏感。 患有偏头痛相关光敏感、某些脑震荡后遗症，或对明亮视野感到疼痛的读者，往往必须依赖深色主题才能阅读。
• 某些低视力状况。 受光散射影响的读者——例如白内障或屈光介质混浊——在页面总发光量降低时可能看得更清楚。屏幕放大镜与高对比度用户中长期存在一批暗底亮字的使用者，原因正在于此。

因此，诚实的总结是：亮底暗字是长篇阅读更好的默认选择，而深色模式是服务于真实人群的无障碍功能，而不仅仅是一种审美。两句话都成立；哪一句都不能成为忽略另一种表面的借口。

光晕与散光问题

深色主题的典型失败是光晕（halation）：深色底上的明亮文字看起来会发光，向外渗出并模糊字形。纯黑上的纯白效果最强，而对散光读者——一种非常常见的屈光问题——最为严重，他们无法完美聚焦的光学系统会把明亮的笔画进一步涂抹开。纤细字体受害最深，因为光晕吞噬了笔画中更大的比例。

补救办法直截了当：

• 绝不在纯黑底上使用纯白文字。 两端都要柔化：极深灰底上的浅灰文字能显著减轻发光，同时保留充足的对比度。
• 补偿视觉字重。 深色底上的浅色文字看起来比反转后的同一字体更粗，因为明亮的笔画会向外扩散。深色主题中的文字往往可以略微减轻字重——若使用可变字体，可通过灰度轴（grade）调整（见下一章），使修正不引起回流。
• 不要简单反转浅色调色板。 靠取反做出的深色主题通常文字对比度过高、界面对比度过低。它应当作为一件独立的作品来设计，拥有自己经过测试的对比度数值。

请注意，WCAG 的对比度下限在深色主题中同样适用，但比值达标并不保证舒适——一个 21:1 的深色主题通得过计算，却过不了散光读者这一关。

尊重读者的选择

prefers-color-scheme 媒体查询报告读者的操作系统偏好，尊重它是现代的基线。在系统层面选择了深色模式的读者已经表达了一种偏好——有时是一种医疗需求——而一个用白色页面轰炸他们的网站等于推翻了这个决定。反过来同样成立：向选择浅色的读者强加深色主题同样自以为是。愿意的话可以提供页面内的切换开关，但默认应遵循操作系统设置，并记得把两个主题都完整定义：只做了一半的深色模式——深色文字被继承到深色表面上——比没有更糟。

页面之下的硬件

显示器本身也是阅读表面的一部分。在 OLED 屏幕上，黑色像素干脆是关闭的，这意味着纯黑主题能省电——一个正当的好处——但逐像素开关在某些面板上会使浅色文字在滚动时产生轻微拖影，这又是选择近黑而非绝对黑的一个理由。电子墨水（e-ink）显示器处于另一个极端：它们像纸一样反射光线、不发光，几乎只能良好呈现正极性。可能在电子阅读器上被阅读的内容，绝不应把易读性寄托在深色主题上。

本章为何是新增内容

2005 年，深色屏幕属于终端和科幻小说；网页是白色的，极性是一个已成定局的问题，因为读者没有任何表达偏好的途径。当时没有系统级的深色设置，没有 prefers-color-scheme，读者口袋里也没有 OLED。深色模式作为主流的、由用户控制的阅读表面是近十年的产物，它把极性从历史脚注变成了一项现实的设计责任。

CSS 实现

/* Design the dark theme; don't just invert the light one */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #171310;   /* near-black — never #000 */
    --ink: #ece5d6;     /* off-white — never #fff (halation) */
  }
  img { filter: brightness(0.9); }  /* dim plates to the surface */
}

建议

• 将亮底暗字保留为长篇阅读的默认表面；持续阅读的研究证据支持它。
• 双向尊重 prefers-color-scheme——把操作系统设置当作读者的决定。
• 深色主题中避免纯黑配纯白；两端数值都要柔化以控制光晕。
• 在深色主题中略微降低字重（或调低灰度轴）以抵消视觉上的增粗。
• 独立设计深色调色板并验证其对比度比值；不要直接反转浅色主题。
• 在 OLED 上优先使用近黑表面而非绝对黑，以减少滚动拖影，除非省电是明确目标。
• 假定电子墨水读者看到的是正极性；绝不让深色模式承担关键职责。

延伸阅读

• MDN：prefers-color-scheme
• web.dev：prefers-color-scheme——Hello Darkness, My Old Friend
• Nielsen Norman Group：深色模式与浅色模式