高对比主题颜色需用border、outline和color构建视觉结构，因background-color等属性会被系统强制清除；须用@media (prefers-contrast: high)或@supports (forced-colors: active)适配，并优先强化边框与轮廓。
高对比主题颜色不是换个深色背景就行，它必须绕过系统强制重绘的干扰，用 border、outline 和 color 这三类属性构建可稳定呈现的视觉结构。
为什么 background-color 在高对比模式下会失效
Windows 和部分 Chromium 浏览器（如 Edge、Chrome 101+）开启高对比度后，会主动剥离几乎所有 background-* 属性（包括 background-color、background-image、渐变），只保留 border、outline、color、text-decoration-color 等少数样式。这不是 bug，是系统级无障碍策略。
- 典型翻车：按钮用
background-color: #007bff+color: white，高对比一开，背景被清空，只剩白字浮在白底上 - 表单控件（
input、select）原生边框常被设为透明或极细，高对比下直接“消失” -
box-shadow、filter、CSS 变量定义的颜色值，全部不可靠
@media (prefers-contrast: high) 的实际写法与兼容性
这个媒体查询是现代适配的起点，但不能单独依赖——Safari 13.1+、Firefox 95+、Chrome 101+ 才完整支持；旧版 Chrome 需 fallback 到 @media (forced-colors: active)，后者行为更激进（连 CSS 变量都可能被覆盖）。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 必须把高对比规则写在常规样式之后，否则会被覆盖
- 不要只改文字色，重点加粗
border和outline：border: 3px solid #000比color: #000更有效 - 对焦点状态，用
outline: 2px solid #000+outline-offset: 2px，避免被系统 outline 合并吞掉 - 链接必须有非颜色类指示，比如
text-decoration: underline或加粗边框
表单控件和按钮的高对比加固写法
原生控件在高对比下最脆弱，需显式重置边框、焦点和禁用态，不能指望浏览器默认。
立即学习“前端免费学习笔记（深入）”；
-
input, select, textarea必须声明border: 2px solid #000，且不带!important（高对比下!important可能被忽略） - 按钮统一用
border而非background-color定义主视觉：button { border: 3px solid #000; color: #000; background: transparent; } - 禁用态用
opacity: 1+border-color: #666，避免系统把 disabled 控件渲染成全灰不可见 - 自定义 checkbox/radio 必须用伪元素 +
border实现，不能依赖background-image
容易被忽略的边界细节
真正卡住项目的往往不是大框架，而是几个具体点：系统强制重绘时，outline 可能覆盖你写的 border，color 值会被替换成系统主题色（比如 Windows 高对比#1 主题强制所有文字为黑/白），而你写的 color: #333 会被无视。所以最终生效的，永远是你写的 border 宽度、样式和颜色，以及是否显式设置了 outline。别在 prefers-contrast 里写任何 background 相关声明，写了也白写。
