暗色界面的对比度陷阱

gaothink.in 整体是深色的。但做暗色界面最容易掉进的坑是：把背景调黑，就觉得做完了。

对比度才是关键

深色模式下，文字和背景的对比度往往比浅色模式更难做对。

• 纯白 #FFF on 纯黑 #000 —— 对比度过高，正文会”刺眼”，长时间阅读疲劳
• 纯黑 on 深灰 —— 看起来很酷，但正文对比度不足

W3C 的 WCAG AA 标准要求正文对比度至少 4.5:1。

这套站点的选择

我用的不是纯黑：

• 背景 #0E0E10（不是纯黑，带一点点蓝灰）
• 正文 #ECECEE（不是纯白）
• 次要文字 #9A9AA3（muted）
• 极弱文字 #5F5F68（faint，只用于元信息）

这样的对比度梯度，让正文舒服、层次清晰、又不刺眼。

一个检验方法

把你的暗色界面截图，转成灰度。如果还能看清层次，对比度大概是对的。 如果糊成一团，就该回去调了。