别急着点：反差大赛的夜间模式先按7步排查
夜间模式越来越被当作设计标配，但在“反差”这一把尺子下，暗色主题往往更容易翻车：文字不够清晰、图片失真、交互状态不明显，甚至在不同设备或浏览器下出现截然不同的视觉效果。要把夜间模式做稳、做对，先按下面7步逐项排查，再提交你的作品或上线更新，能省下不少返工时间，也更容易在反差评分里拿高分。
1) 切换系统/浏览器暗色方案，检查是否响应预期
- 测试方式：在 macOS、Windows、iOS、Android 以及主流浏览器里切换系统暗色/浅色主题，确认页面是否按预期切换（prefers-color-scheme）。
- 快速修复：用 CSS 变量区分明/暗主题，并通过 @media (prefers-color-scheme: dark) 覆盖；同时声明 meta name="color-scheme" 以帮助浏览器渲染原生控件。
2) 用对比度工具测显文本与关键元素
- 要点：文本（正常文本 4.5:1，大字号 3:1）、图形控件与按钮（至少 3:1）要满足 WCAG 对比度要求。
- 测试工具：WebAIM Contrast Checker、axe、Lighthouse、Colorable 等。
- 修复策略：提高前景色亮度或加深背景；对小字号文本考虑加粗；关键按钮可加显眼边框或阴影增强轮廓。
3) 在不同亮度和色温环境下验证可读性
- 情景：白天强光、室内暖光、夜间昏暗三类环境下，暗色主题的表现差异明显。
- 检查点：低亮度下文字是否模糊、色块是否混淆、图标识别是否受影响。
- 解决办法：为关键文本提供更高对比度，为非关键信息降低视觉权重；在暗光环境下适当减少纯黑（#000）使用，改用深灰以防“刺眼”或色偏。
4) 图片与插图的暗色适配
- 问题：原本在浅色背景下表现良好的图片，放到暗背景会显得没对比、细节丢失或边缘发光。
- 检查与处理：为图片准备暗色版本或在图片上加 10–30% 的黑色半透明叠加层；对图标使用可变色 SVG，确保在暗模式下能调整填色与描边。
- 避免：单纯依靠 blend-mode 强制反色，容易被浏览器强制暗色或不同渲染引擎差异影响。
5) 焦点、可交互状态与可视反馈
- 内容：键盘焦点、悬停、按下、禁用状态在暗背景下容易“隐身”。
- 测试：用键盘导航全站，检查所有交互控件的焦点环、边框、背景变化是否可辨。
- 改进：为焦点和错误状态使用明确色彩或宽一点的轮廓线；必要时放大交互区域，保证可点击性与可视性。
6) 规避浏览器“强制暗色”与系统反转的副作用
- 背景：部分浏览器有“Force Dark Mode”或系统会对网页进行色彩反转，这会让你未准备的元素看起来异常。
- 检查方法：在开启强制暗色的浏览器里测试，观察图片、表单控件、第三方组件是否被异常改色。
- 对策：对关键元素显式设置背景与前景色，避免依赖默认透明或继承颜色；对图片提供暗色替代资源，或在 meta 标签和 header 中提示优先色方案。
7) 性能、动画与高对比度偏好
- 内容：阴影、模糊、动画在暗模式下更容易造成视觉干扰或感知问题。
- 测试项：开启 prefers-reduced-motion、prefers-contrast: more 等辅助功能设置，查看页面是否尊重系统偏好。
- 优化建议：为高对比用户提供更显著的对比样式；对动画与复杂效果提供更轻量的替代样式或关闭开关，确保在低性能设备也能保持清晰对比。
最后的快速清单（提交前必做）
- 在至少三种设备/两种浏览器完成暗色测试。
- 用自动化工具跑一次对比度检测并修复高优先级问题。
- 检查图片与图标在暗色下的可识别性并提供替代资源或叠加层。
- 遍历键盘与触控交互，确认焦点与状态明显。
- 模拟强制暗色模式与辅助设备偏好，确保无严重异常。
- 把修改做成 CSS 变量/主题切换方案，便于日后维护与评审修改记录。
- 将关键视图截屏并与评审者/用户沟通，优先修正影响可读性的项。