响应式色彩设计需兼顾系统偏好与可访问性，核心是适配 prefers-color-scheme、prefers-reduced-transparency 和 forced-colors 三类上下文，而非仅依赖媒体查询切换颜色。
响应式设计里不能只靠媒体查询切换颜色
很多人以为用 @media 包一层 color 或 background-color 就算完成“色彩响应式”，其实这容易忽略系统级偏好和实际可访问性。比如深色模式下硬写死 #ffffff，可能在 OLED 屏上过曝；又或者在低亮度环境里仍用浅灰文字，导致对比度不足被 WCAG 拒绝。
真正要适配的不是“设备尺寸”，而是“用户当前所处的色彩上下文”。关键判断点有三个：prefers-color-scheme、prefers-reduced-transparency、forced-colors。它们不依赖屏幕宽度，却直接影响颜色是否可用。
用 prefers-color-scheme 做基础明暗切换
这是目前兼容性最好（Chrome 87+、Firefox 96+、Safari 14+）、语义最清晰的方案。它返回 light 或 dark，不是靠 JS 读取系统设置，而是由浏览器原生监听并注入 CSS 变量。
:root {
--text-primary: #1a1a1a;
--bg-surface: #ffffff;
}
@media (prefers-color-scheme: dark) {
:root {
--text-primary: #e0e0e0;
--bg-surface: #121212;
}
}
body {
color: var(--text-primary);
background-color: var(--bg-surface);
}
- 别直接在
@media里写死样式，优先用 CSS 自定义属性承接，方便后续扩展（比如加第三种模式） - 避免只改背景不调文字——深色模式下
#000000文字在#121212背景上对比度只有 1.08:1，远低于 WCAG AA 要求的 4.5:1 - 不要用
!important覆盖，否则会阻断用户通过浏览器扩展或系统强制配色的干预
处理 forced-colors: active 场景
这是 Windows 高对比度模式或某些辅助工具触发的状态，浏览器会强制重映射页面颜色为系统预设调色板（如白底黑字、黑底黄字）。此时你写的任何 color、background 都会被忽略，除非显式声明 forced-color-adjust: none——但这是反模式，会破坏可访问性。
立即学习“前端免费学习笔记（深入）”；
正确做法是：接受重映射，并用 CanvasText、ButtonFace 等系统色关键词替代具体值。
@media (forced-colors: active) {
.card {
border: 2px solid CanvasText;
background-color: ButtonFace;
}
.btn {
color: LinkText;
background-color: Highlight;
}
}
-
CanvasText对应当前模式下的默认文本色，ButtonFace是按钮表面色，它们会随系统切换自动变化 - 避免用
rgba()或透明度控制层次——forced-colors下所有 alpha 值都会被转为 1，半透效果失效 - 测试时别只靠模拟器，在 Windows 设置 → 辅助功能 → 高对比度中真实开启验证
颜色变量要带语义，别按设备命名
看到 --color-mobile-dark 或 --color-tablet-light 这类变量名就该警觉：颜色不是为设备服务的，是为内容状态服务的。设备只是载体，真正变化的是用户的视觉需求、环境光照、系统策略。
推荐按角色而非设备组织变量：
:root {
--color-text-primary: #1a1a1a;
--color-text-secondary: #666;
--color-bg-surface: #fff;
--color-bg-elevated: #f8f9fa;
--color-border-interactive: #007bff;
}
- 变量名里不出现
dark/light，而是在@media规则中统一覆盖整套语义变量 - 深色模式下
--color-bg-surface应该变暗，但--color-border-interactive可能需要更亮（提升点击感知），而不是简单反色 - 如果项目需支持主题切换（非系统级），用
data-theme="dark"手动控制比依赖prefers-color-scheme更灵活，但务必同步监听系统变化并更新属性
