禁用按钮应避免仅依赖opacity，需结合color和background-color调整以提升可读性与对比度，确保在不同主题下均清晰可见，并满足WCAG AA标准，增强可访问性体验。

按钮在禁用状态下如果颜色和正常状态太接近，用户很难分辨当前是否可点击，影响体验。单纯使用 opacity 降低透明度虽然简单，但可能导致颜色偏灰、发脏，尤其在深色背景上更明显。可以通过结合 opacity 和微调 color 来优化视觉效果。

Web Accessibility (WCAG 2 AA))

将 WCAG 2 AA 无障碍标准应用于设计系统、UI 组件和网页——通过可运行的验证器进行对比度计算，采用设计 token 模式使颜色天生可访问，设定排版和焦点状态规则，并提供语义检查清单。适用于构建或审查 UI。

下载

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 的微调，能让禁用按钮更清晰、更专业。不复杂但容易忽略。