forced-color-adjust: none 本身不实现高对比度适配，仅是“闸门”，必须配合显式颜色声明（如color: ButtonText）和@media (forced-colors: active)媒体查询+系统语义色才能生效。
直接说结论：forced-color-adjust 本身不“适配”高对比度模式，它只是个开关——开闸放行你写的颜色，但闸开了没水（显式颜色声明），照样没用。真正起作用的是 @media (forced-colors: active) 媒体查询 + 系统语义色关键词。
为什么只写 forced-color-adjust: none 没效果
常见错误是这样写：
button {
forced-color-adjust: none;
}
结果在 Windows 高对比主题下按钮还是看不见。原因很实在：
-
forced-color-adjust: none只是告诉浏览器“这个元素，别强制换色”，但它不会自动恢复你原来写的color或background-color - 如果你没紧接着写
color: ButtonText;和background-color: ButtonFace;，浏览器就按系统默认逻辑填色——可能文字和背景同为白色 -
border: 1px solid #000这种简写大概率失效，因为border-color被清空，只剩1px solid的“壳”
哪些地方必须用 @media (forced-colors: active) 重写
这个媒体查询才是检测高对比度模式的唯一可靠方式，prefers-contrast: high 或 prefers-color-scheme 都不触发系统级接管。生效后，以下样式全部被无视：
立即学习“前端免费学习笔记（深入）”；
- 硬编码颜色值：
color: #333、background-color: rgb(255, 255, 255) - 装饰性属性：
box-shadow、text-shadow、background-image、opacity - 透明背景：
background-color: transparent可能映射为不可见色，应显式写Canvas或ButtonFace
正确做法是在媒体查询里用语义色重建结构：
@media (forced-colors: active) {
button {
background-color: ButtonFace;
color: ButtonText;
border-width: 2px;
border-style: solid;
border-color: GrayText;
}
}
SVG 和图标怎么保色又无障碍
SVG 默认也会被强制换色，导致 ✅ 或 logo 变灰。想保留辨识度，得组合三样东西：
- 对
svg元素加forced-color-adjust: none; - 显式写
fill: Highlight;或stroke: ButtonText;（不能只靠fill="currentColor"） - 父容器必须带
color-scheme: light dark;（Safari 17.4+ 强制要求，否则忽略forced-color-adjust）
漏掉任意一项，图标在 Safari 或旧版 Chrome 下就失效。
最容易被忽略的兼容性细节
不是所有浏览器都支持 forced-color-adjust，也不是所有系统设置都能触发 forced-colors: active：
- iOS 需同时开启「增加对比度」+「降低透明度」+「使用灰度」三项，缺一不可；只开一项只会走
prefers-contrast: high - Tailwind 用户注意：
@media (forced-colors: active)必须写在@layer base之后或 CSS 文件末尾，塞进@layer components会被 JIT 编译器跳过 - 旧版 Safari（outline 替代
border）不能省
真正难的不是写对语法，而是在没有背景、没有阴影、没有渐变的前提下，仅靠边框粗细、文字色差、underline 和 outline 构建出稳定可读的视觉层级——这没法靠一个属性解决。
