UI设计深色模式调来调去不顺眼，背景和字体到底先顾哪头？

深色模式调来调去不顺眼，通常不是“感觉不对”，而是没建立明度层级和对比度基线。在2026 年的项目交付习惯里，深色模式不是把背景换黑、文字换白就完事，而是要重新定义一套色板和对比度规则。判断做没做到位，先看正文与背景的对比度是不是达到4.5:1（按 WCAG AA 级标准），再看背景之间有没有足够跨度。如果这两条没立住，后面怎么调都是原地打转。

深色模式为什么总是发灰、发闷？

很多设计稿在浅色下很利落，一换深色就发灰、发闷。常见原因不是颜色没选对，而是直接做了“反色”：把浅灰背景换成深灰，文字换成白色，忽略了人眼在暗底上对高饱和色更敏感、对低明度细节更钝。深色模式不是色值取反，而是需要重新映射明度、饱和度和对比度。

从项目交付的经验看，设计师最容易卡在两个选择上：背景到底用多黑？字体用多亮？纯黑不建议用，常见区间在 #121212 到 #1E1E1E 之间；文字也不建议纯白，常见用 #E0E0E0 到 #FFFFFF 之间，次要文字再降一档。目的是避免极端对比造成视觉闪烁。

先定背景层，还是先定字体色？

按我们做项目落地的习惯，顺序是：先定背景层级，再校文字对比度，最后调语义色。顺序反了，就会出现“这个背景上文字看得清，换个背景又看不清”的返工。三步校准法如下：

1. 定背景层级：先选主背景色，常见 #141414 ~ #1F1F1F 区间；再按 6% ~ 12% 的明度差（经验区间）推出卡片层和悬浮层，至少三层才能拉开空间感。
2. 定文字对比度：正文与当前背景对比度不低于 4.5:1，大字号或次要文字可放宽到 3:1；在暗底上同步校准文字和图标亮度，不要只改字色。
3. 定语义色：成功、警告、错误等颜色直接照搬浅色版会过亮，通常饱和度降 10% ~ 20%、明度调低，再与背景拉够 3:1，并检查色盲模式下的区分度。

一次工具类 App 的深色模式交付中，团队只有一名设计师，排期三周。我们先把背景三层色值按 6%~12% 的明度差（经验区间）拉开，再统一文字到 4.5:1 以上。因为这一步卡得死，后续几乎没有因为可读性返工；但当时没提前和开发约定系统状态栏的深色适配，最后多花了半天补适配。如果重新排，我会把系统组件适配写进第一轮验收清单。

背景和字体，落到什么数值才算稳？

背景层级不是越多越好，常见分 3~4 层：主背景、容器、浮层、强调层。每层之间明度差要均匀。比如主背景 #121212、容器 #1C1C1C、浮层 #242424，是相对稳妥的推进方式。

字体按重要性分三档：主要文字对比度不低于 4.5:1，次要文字不低于 3:1，占位符或禁用文本不建议低于 2:1。在 2026 年的设计工具里，可以直接用对比度检查插件测，不用靠肉眼猜。

• 背景层之间明度差稳定在 6%~12%（经验区间），能分清前后关系。
• 正文对比度不低于 4.5:1，用工具抽查 5~8 个关键页面。
• 语义色在暗底上不刺眼，与背景对比度不低于 3:1，色相与浅色版保持一致。
• 图片上方加渐变压暗，照片边缘加内阴影，避免亮部直贴背景。
• 系统状态栏、输入法弹层、分享面板等系统组件也要适配深色，否则会出现“阴阳界面”。

深色模式到底值不值得做？先看三组对比

深色模式不是品质背书，做不好反而拖累体验。常见方案有三组，按成本从低到高：

• 方案A：只做浅色模式。适合小项目、内容以图片为主的应用，开发成本最低，但用户主动切换时会觉得系统不支持。
• 方案B：做两套主题，跟随系统设置。适合工具类、阅读类产品，用户期望与系统一致，设计联调工作量比纯浅色多 20%~30%，对应双周迭代大约多 0.5~1 个迭代（经验区间）。
• 方案C：强制深色或内置浅色/深色/跟随系统三种模式。适合直播、视频、夜间使用为主的产品，设计维护量最高，联调时间按 30%~50% 预留，对应双周迭代大约多 1~2 个迭代（经验区间）。

适用与不适用边界：

• 适用：阅读、导航、工具、游戏，以及夜间使用高频的产品。
• 不适用：以高清图片展示为主的产品（摄影图库、电商主图预览）、以白天办公为主的内部系统、迭代节奏极快且没有设计余量的项目。如果团队没有余量，选择不做也是一种合格决策。

常见问题

深色模式背景是不是越黑越好？

不是。纯黑背景在屏幕上对比度和反光都更强，长时间看容易累，也不利于表现阴影。常见做法是用 #121212 到 #1E1E1E 之间的深灰色，再配合明度分层的表面色。

深色模式字体用纯白真的对吗？

不建议。纯白在暗底上对比度过强，容易产生光晕。常见做法是用 #E0E0E0 到 #FFFFFF 之间的亮度，次要文字再低一档，保证层次。

深色模式下按钮颜色怎么处理？

按钮要和背景形成明确对比。实心按钮可以用品牌色，但需微调明度避免过亮；如果品牌色在暗底上刺眼，可以用浅色文字加深色填充或描边方案。

小项目值不值得做深色模式？

如果用户确实在夜间使用，且开发有余力，可以跟随系统做一套；否则建议先不做。深色模式做不好反而拖累体验，不做不影响核心功能。

深色模式怎么验收？

切到深色模式逐页检查对比度、层级、图片边缘和系统组件；再用视觉回归工具跑一遍主流页面，人工核对关键流程。重点关注状态栏和弹层。

先别急着把深色背景拖出来试色。第一步，把主背景、卡片、浮层三级色值先在调色板里拉开；第二步，用对比度工具抽查正文、次要文字、按钮文字；第三步，把图片、图标、状态色各过一遍再交开发。如果项目排期紧、或产品是纯图片展示型，可以先不做深色模式，省下的时间把浅色模式的细节打磨到位。