现代浏览器支持color-mix()动态生成禁用态灰度色，保留原色结构、不降低亮度，比grayscale()更可控且兼容高对比度模式；需配合disabled属性、cursor和forced-colors媒体查询确保可访问性。
button:disabled 里用 color-mix() 直接算灰度值
现代浏览器（Chrome 111+、Safari 16.4+、Firefox 110+）已支持 color-mix()，它能基于当前按钮的主色动态生成匹配的禁用灰。不用再手动配 #999 或硬写 grayscale(100%)，颜色语义自动对齐。
关键点是：禁用态不是“统一变灰”，而是“保留原色结构但去饱和”。color-mix(in srgb, currentColor 50%, #000 50%) 这种写法比 grayscale() 更可控——它不碰亮度，只压彩度，文字依然清晰。
-
button { color: #007bff; background-color: #007bff; }—— 主色是蓝色 -
button:disabled { color: color-mix(in srgb, currentColor 40%, #000 60%); background-color: color-mix(in srgb, currentColor 30%, #ccc 70%); }—— 禁用时文字变深灰蓝，背景变浅灰蓝，过渡自然 - 避免用
color-mix(in srgb, currentColor 100%, transparent)，透明会吃掉对比度，高对比度模式下直接不可读
为什么不能只靠 filter: grayscale() 配合相对颜色
filter: grayscale() 是图像级处理，它把整个渲染结果“拍平”再上滤镜，和 CSS 颜色计算不在同一层。哪怕你在 button:disabled 里同时写了 color-mix() 和 filter，后者也会覆盖前者视觉表现，且无法响应 @media (forced-colors: active)。
更实际的问题是：iOS Safari 对 filter 在 :disabled 元素上的重绘有延迟，快速启停时灰度跳变明显；而 color-mix() 是纯样式计算，无此问题。
立即学习“前端免费学习笔记（深入）”；
- 测试方法：打开 DevTools，在
button:disabled规则里临时删掉filter，看color-mix()是否立刻生效 - 若你必须保留
filter（比如要灰度整个组件容器），请把color-mix()放在子元素上，避开叠加干扰 -
color-mix()不支持 IE/旧 Edge，但这些浏览器本身也不支持:disabled的现代样式响应，降级逻辑可统一走opacity + #999
如何让 color-mix() 在深色模式下也合理变灰
深色模式下，直接把 currentColor 混黑会过暗。需要根据 color-scheme 动态切混入色：亮色模式混 #000，深色模式混 #fff，才能保持灰度“浓度一致”而不是“绝对值一致”。
写法必须用 @media (prefers-color-scheme: dark) 包裹，不能靠 CSS 变量 fallback——变量无法触发颜色空间实时重算。
button { color: #007bff; }button:disabled { color: color-mix(in srgb, currentColor 40%, #000 60%); }@media (prefers-color-scheme: dark) { button:disabled { color: color-mix(in srgb, currentColor 40%, #fff 60%); } }- 注意：不要用
color-mix(in lch, ...)，LCH 空间在 Safari 中对:disabled的支持仍不稳定（2026 年 8 月实测）
兼容性兜底与 a11y 必须同步做的事
color-mix() 是锦上添花，不是禁用状态的全部。它只管颜色，不管焦点、语义、交互。漏掉下面任意一项，用户就会遇到“看着灰了，但键盘还能 tab 进去按回车”的问题。
- 确保按钮是原生
<button>，并真实设置disabled属性（不是disabled="false"，也不是自定义属性） - 显式加
cursor: not-allowed，否则鼠标悬停时无反馈 - 在 JS 控制状态切换时，先更新 class 再设
el.disabled = true，或用requestAnimationFrame确保样式已应用 - 如果用了自定义组件（如 React 的
<Button disabled>），检查最终渲染是否输出了原生disabled属性，而非仅靠aria-disabled
最常被忽略的是：color-mix() 生成的颜色可能在高对比度模式下被系统强制替换，所以仍需配合 @media (forced-colors: active) 显式定义 color 和 background-color。
