应主动覆盖 button:disabled 样式以满足 wcag 2.1 aa 对比度≥4.5:1 的要求，需同时设置 background-color 和 color，避免 opacity；深色模式下用 @media 重定义，并确保 disabled 属性真实存在。
禁用按钮的 disabled 状态默认对比度太低怎么办
浏览器对 button[disabled] 的默认样式（比如灰色文字 + 浅背景）在多数屏幕和光照环境下可读性差，尤其对视力障碍用户或高亮/暗色主题下更明显。这不是 bug，而是规范允许的最小化实现——你必须主动覆盖。
- 不要只改
color：仅调亮文字颜色（如color: #666）仍可能因背景过浅导致对比度不足；需同时控制background-color和opacity（后者慎用，会降低整个按钮的可访问性语义） - 用 WCAG 2.1 AA 标准校验：文本与背景对比度至少 4.5:1；工具推荐使用 Chrome DevTools 的「Accessibility」面板或在线检测器（如 webaim.org/contrastchecker）
- 避免用
opacity: 0.5模拟禁用态：它会让屏幕阅读器仍可聚焦、键盘仍可触发，且对比度计算基于叠加后颜色，极易不达标
如何用 CSS 正确覆盖 button:disabled 样式
直接写 button:disabled 选择器即可，但要注意层级和 specificity。Bootstrap 或其他框架可能已设了高优先级样式，需加 !important 或提升选择器权重（如 .my-btn:disabled）。
- 基础安全写法：
button:disabled {<br> background-color: #ccc;<br> color: #333;<br> border-color: #aaa;<br>}——手动指定明确定义的颜色组合，绕过浏览器默认灰阶 - 适配深色模式：
@media (prefers-color-scheme: dark)内重定义:disabled样式，例如背景用#444、文字用#bbb - 保留视觉反馈差异：禁用按钮不该和启用状态“一样亮”，但要确保文字清晰可辨；可微调
background-color而非大幅降饱和度
disabled 与 aria-disabled="true" 的区别别搞混
disabled 是原生属性，会真正禁用交互、移除焦点、被屏幕阅读器跳过；aria-disabled="true" 只是语义标记，按钮仍可点击、可聚焦——它不能替代 disabled，只用于 JS 动态控制但尚未应用原生禁用的过渡场景。
- 如果用 JS 控制禁用逻辑，最终一定要设置
button.disabled = true，而不是只加aria-disabled - 某些 UI 库（如 React 中的
disabledprop）会自动同步到 DOM 属性，但手写 HTML 时务必确认disabled属性真实存在 - 检查元素是否真被禁用：在 DevTools 中看
button元素上是否有disabled=""属性，且 computed styles 中pointer-events为none
opacity 后忘了测试屏幕阅读器行为——它会把半透明文字读出来，但用户根本看不见。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
