1. 现状与目标
1.1 按钮禁用态的可见性挑战
在日常的网页设计中，按钮的禁用态往往因为颜色对比不足、背景接近、以及边框不明显而难以被识别。可用性和可访问性成为需要优先关注的问题，直接影响用户对界面的理解与操作路径。
目标是让禁用态在视觉层面与活动态形成清晰的差异，并且在键盘导航和屏幕阅读器场景下仍能保持一致性与稳定性，从而提升整体用户体验。
2. :disabled 伪类的作用与局限
2.1 基本原理与覆盖范围
:disabled 伪类是实现跨控件禁用状态统一外观的核心工具。通过这种伪类，可以在一个地方定义禁用时所有按钮的颜色、背景、边框以及光标行为，从而避免各自为政的样式差异。
不过需要注意：不同浏览器对默认禁用样式的处理可能不同，尤其是在自定义主题或高对比度模式下。因此需要通过自定义样式来实现跨浏览器、跨主题的一致性，确保禁用态在大多数场景下都具备明显的识别性。跨浏览器与主题一致性是设计要点。
3. 实践方案：统一弱化颜色与指针状态
3.1 具体实现要点
如果你在思考：按钮禁用态太不明显怎么办？可以使用 :disabled 伪类来统一弱化颜色与指针状态，从而提升提示性。通过一组集中定义的变量和样式，可以让所有禁用按钮在视觉和交互层面保持一致，方便维护并提升无障碍体验。
实现时应关注对比度、触控与按钮区域的直观性，以及键盘导航中的焦点表现。对比度、光标状态和焦点样式应协同工作，确保禁用态不会被误认作可用态。
:root {--btn-bg: #2b6cb0;--btn-color: #ffffff;--btn-border: #2b6cb0;--btn-disabled-bg: #e9ecef;--btn-disabled-color: #6c757d;--btn-disabled-border: #dee2e6;
}
button, .btn {display: inline-flex;align-items: center;justify-content: center;padding: .5rem 1rem;border-radius: .25rem;border: 1px solid var(--btn-border);background-color: var(--btn-bg);color: var(--btn-color);cursor: pointer;transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
button:disabled, .btn:disabled {background-color: var(--btn-disabled-bg);color: var(--btn-disabled-color);border-color: var(--btn-disabled-border);opacity: 0.9;cursor: not-allowed;pointer-events: none;/* 提升提示性：降低饱和度并避免视觉疲劳 */filter: saturate(0.5);box-shadow: none;
}
<button class="btn" disabled>提交</button>