暗色模式设计没那么简单：对比度、层级、纯黑陷阱，一次说清

前阵子给客户网站做暗色模式，我以为就是「把背景换黑、字换白」，结果做完被客户一句话问住了：为什么这个弹窗看起来像浮在黑洞里？我这才发现，暗色模式的门道比我想的多。

2026年做网站，暗色模式基本是标配了，系统级深色模式、浏览器自动适配都支持。但很多站点的暗色模式就是简单反色，看着难受还伤眼。今天把关键几点说清楚，都是能直接用的。

别用纯黑，用深灰

纯黑（#000000）在暗色模式下是反面教材。OLED屏上纯黑确实省电，但大面积纯黑会让界面层次全消失，浅色元素和它一对比，亮得刺眼。主流做法是用深灰蓝，比如#121212、#1E1E24这类，既省电又不刺眼。

用明度区分层级，不是用颜色

暗色模式里，卡片、侧边栏、弹窗靠什么区分？靠明度。背景#121212，卡片#1C1C1C，弹窗#242424，一层比一层亮一点，层次就出来了。别用黑色阴影做层次——暗色模式下阴影根本看不见，得用「亮边」：卡片加一圈1px的浅色描边，比什么阴影都好使。

文字对比度是硬指标

暗色模式下，正文文字建议用#E0E0E0到#FFFFFF之间，别用纯白，太刺眼；次要文字用#9E9E9E左右，至少和背景保持4.5:1的对比度，这是无障碍标准，2025年欧盟EAA法案生效后，这条更是硬要求。我一般用WebAIM的对比度检查器过一遍，关键页面达标就放行。

图片和品牌色要单独处理

白色底的图片直接扔进暗色页面，会像贴了块膏药。要么给图片加圆角和描边，要么用CSS的filter降低亮度。品牌色也别直接用亮版本，饱和度降一点、亮度调高一点，在暗底上才好看。

最后给个偷懒建议：如果你用的是WordPress，主题自带暗色模式就直接用，别自己从头写。自己写的适合定制网站和落地页，照着上面四条来，基本不会翻车。

标签： 暗色模式 UI设计 网页设计 对比度