检查按钮颜色对比度

工具示例

任务背景

一个按钮使用青绿色背景和白色文字。发布页面前，需要检查默认状态和 hover 状态。

打开对应工具: 颜色对比检查

输入和输出

Default: #0f766e background, #ffffff text
Hover: #115e59 background, #ffffff text
Small label: 13px bold

Default contrast: review against WCAG AA for normal text
Hover contrast: compare separately
Small text: treat as normal text unless it meets large-text size rules

复制前复核

• 分别检查默认、hover、禁用和聚焦状态。
• 小标签通常需要比大标题更强的对比度。
• 不要只依赖颜色表达禁用或错误状态。

要点： 对比度要按状态检查。某个颜色组合在一个状态通过，不代表另一个状态也通过。

继续使用