禁用按钮应避免仅依赖opacity，需结合color和background-color调整以提升可读性与对比度，确保在不同主题下均清晰可见，并满足WCAG AA标准，增强可访问性体验。
按钮在禁用状态下如果颜色和正常状态太接近，用户很难分辨当前是否可点击，影响体验。单纯使用 opacity 降低透明度虽然简单，但可能导致颜色偏灰、发脏，尤其在深色背景上更明显。可以通过结合 opacity 和微调 color 来优化视觉效果。
1. 使用 opacity 降低整体透明度
将 disabled 按钮的 opacity 设置为 0.5~0.7 是常见做法，能快速传达“不可用”状态。但只依赖 opacity 可能导致颜色对比度不足，特别是当按钮本身颜色较深时。button:disabled {
opacity: 0.6;
cursor: not-allowed;
}2. 配合 color 微调提升可读性
在降低 opacity 的同时，手动设置 color 和 background-color，确保文本清晰、风格统一。例如：将文字颜色调得更灰一点，背景稍亮或稍暗，增强层次感。button:disabled {
opacity: 0.6;
color: #aaa; /* 比原文字色更灰 */
background-color: #e0e0e0;
cursor: not-allowed;
}3. 根据主题动态调整（适用于多种主题）
如果你的项目有多个主题（如深色/浅色模式），建议为不同状态定义明确的颜色变量。这样可以保证禁用状态在各种背景下都足够清晰。:root {
--btn-disabled-bg: #f0f0f0;
--btn-disabled-color: #999;
}
.dark-theme button:disabled {
--btn-disabled-bg: #333;
--btn-disabled-color: #666;
}
button:disabled {
opacity: 1; /* 完全关闭透明度，由颜色控制 */
background-color: var(--btn-disabled-bg);
color: var(--btn-disabled-color);
cursor: not-allowed;
}4. 注意可访问性（Accessibility）
确保禁用状态下的文字与背景仍有足够的对比度，至少满足 WCAG AA 级标准（4.5:1）。可用在线工具如 WebAIM Contrast Checker 验证颜色组合。避免纯靠透明度表达状态，对视力障碍用户不友好。基本上就这些。用 opacity 快速处理可以接受，但配合 color 和 background 的微调，能让禁用按钮更清晰、更专业。不复杂但容易忽略。
