对,俺就是传说中那种喜欢开亮色模式的人。
看(不)清满屏的字
我是一个需要从屏幕上读很多东西的人——毕竟,我是一枚职业码农,一个业余博主,在电脑屏幕前面做阅读是我的本职工作和休闲娱乐的重要一环。有些时候我得读整屏整屏的文字,最差劲的时候我需要在一个 22 寸显示器上面读一整页的 12pt 的字。
我的眼睛在这种环境下会犯一个奇怪的毛病:如果这个页面是黑底白字的话,我看不了几秒钟眼前就会出现非常强烈的横条幻象。行与行之间的空白(或者说空「黑」)会出现说不清是什么颜色的彩条侵蚀文字本身,非常影响阅读。
非得让我找个理由的话,我只能怪自己之前正经看过麦科洛效应的诱导图像(警告:直达链接),导致我直接永久损伤了视神经核;或者因为近视散光但是又不戴眼镜,脑用 DLSS 补细节给补出幻觉来了。
但这些说法未免过于牵强,毕竟,如果所有黑底白字都会产生这个现象的话,我在终端模拟器下为什么不会看到彩条呢?仔细排查后,我个人的想法是:
深色模式是好东西,但是——
实现不对全部白搭!
许多站点以为「深色模式」就是黑底白字,实现的方案就是纯粹的亮色模式加一个颜色反转滤镜,或者只是单纯地指定文字和背景颜色与亮色模式成反色。这是完全不对的!
虽然从理论上来说,纯黑底白字和纯白底黑字具有同样的对比度(WebAIM 计算得出均为 21:1),但是如果带入实景的话,黑底使得屏幕的出光亮更少,导致人眼瞳孔打开更大,感受到的对比度应该更高才对。而且对于我这种散光但是又懒得戴眼镜的人来说,瞳孔打开更大会导致散光造成的模糊更明显。
况且,人眼对于明度的感知并不是线性的。单纯地计算颜色之间的对比度仍然会出现同样的对比度环境下字体的可辨识度不同的情况。
这么说可能有点抽象,我们可以做一个小实验来说明:
可辨识性检测
在 WebAIM 的对比度计算器界面上,我们做出以下操作:
- 将前景色设置为
#DBDBDB, 背景色设置为#FFFFFF, 观察下方文字 - 将前景色设置为
#262626, 背景色设置为#000000, 观察下方文字
这两种颜色配比计算出来的对比度都是 1.38:1, 但是对于我来说,保持阅读距离相同的情况下,白底比黑底更好辨认。你可能也会得出相似的结果。
我个人的偏好
纯白底黑字看多了也会眼疼,毕竟 21:1 的对比度还是很难接的。我喜欢亮色环境下大概有 10:1 左右的对比度,这个博客的亮色模式就是这样设计的;如果是无 ClearType 渲染的点阵字体的话,其实 5:1 左右也可以:毕竟 VSCode 自带的 Solarized Light 主题的默认配色大概就是这个范围。
终端模拟器实际上是一个有趣的例外:这个东西默认行间距是 0. 行与行之间紧密排布而且很少空隙的时候,就不会触发彩条幻象。而且我所使用的终端模拟程序支持彩色显示,大部分时间都有不同颜色的文字做视觉缓冲。
那这么说来,还得怪麦科洛。
正在加载评论……