深色模式的可读性风险
逐项量出深色界面的对比度、发光和层级问题
这是我的深色模式配色：[色值或截图]。请评估可读性风险，逐项给数值：1）正文、次要文字、占位符、禁用态与各自背景的对比度，标出低于 4.5:1 的；2）背景用纯黑还是 #121212 这类抬升面，给取舍理由；3）哪些高饱和色在深底上会震动，需要降饱和或提亮；4）阴影在深色里几乎不可见，层级改用什么表达；5）图片、白底插图、1px 分隔线的处理；6）连续阅读 10 分钟以上的疲劳点。最后给一版修改后的色板。
使用建议
别在显示器上判断深色可读性；拿到手机上，把亮度调到 30% 再看一遍。
适合什么场景
- 产品要上线深色模式，设计稿直接用了品牌色的深色版——先要知道哪些组合在真机上看不清。
- iOS 与 Android 的深色规范不同，团队想统一一套——先量化风险，再决定哪里必须分平台。
不适合的场景
- 只是把白底界面反色一次当深色模式——反色不是设计，这种情况要重做，不是评估。
- 产品以图片浏览为主、文字极少——对比度问题不突出，优先级应让给图片的亮度控制。
示例
输入
深色界面：背景 #000000，正文 #FFFFFF，次要文字 #8A8A8E，主按钮 #0A84FF 配白字，卡片 rgba(255,255,255,0.06) 叠在纯黑上，1px 分隔线 rgba(255,255,255,0.1)
你会得到
正文对纯黑 21:1，但纯黑配纯白在 OLED 上会有光晕，建议背景改 #121212、正文改 #E6E6E6，仍有 15.8:1；次要文字 #8A8A8E 对 #121212 只有 4.3:1，需提到 #A1A1A6；主按钮 #0A84FF 配白字 3.0:1，不达标，改用深色文字或把蓝提到 #409CFF；分隔线 0.1 透明度在纯黑上低于可见阈值，提到 0.16。层级改由表面亮度差和 1px 边框承担，不靠阴影。
常见误用
- 只检查正文的对比度——真正读不清的往往是次要文字、占位符和禁用态。
- 把深色模式做成纯黑配高饱和色——颜色边缘会产生光晕，长时间看更累。
可以这样改
- 改成「为 OLED 省电做一版纯黑，再为阅读做一版 #121212，比较两者」——同一产品允许两种取舍并存。
- 加「深色模式下的品牌色替换表」——品牌色往往要单独提亮，不能直接沿用。