阅读口径
本页聚焦网页控件必要视觉信息的非文本对比，不覆盖全部交互准则。
边界与文字是两件事
一个按钮可能文字很清楚，但浅底与页面背景太接近，读者难以发现可点击区域。反过来，粗边框也不能弥补按钮文字难读。把两者分开记录，分别检查文字色对与识别控件所需的轮廓。
判断哪些视觉信息是必要的
WCAG 2.2 的非文本对比准则对识别用户界面组件及状态所需的视觉信息，通常要求相对相邻颜色至少 3:1；有非活动组件等例外。不能把这一数值机械套给所有装饰分隔线，也不能忽略真正承担识别任务的边界。
原创练习：选中色板卡
一组色板卡默认只有浅色细框，选中后仅加深一点背景。改稿在选中项增加“当前选择”文字和勾选符号，并使用更明确的轮廓。颜色负责补充状态，文字和形状说明到底发生了什么。
可执行检查单
- 01圈出按钮、输入区与选中状态中承担识别任务的部分。
- 02按相邻背景分别计算必要边界或图形的色对。
- 03增加状态文字或形状，再检查默认、焦点与选中状态是否一致。
一个常见问题
禁用按钮也必须同样醒目吗？
该准则对非活动组件有例外，但这不代表应隐藏重要说明。需要解释为何不可用时，应提供可读的原因文字，让用户知道缺少什么条件。
把装饰边框与控件边框分开
普通阅读卡片即使没有外框，仍可能靠标题和间距建立分组；可交互的输入区域则可能依赖边界被发现。判断要依据用途。
来源与适用范围
W3C：理解非文本对比（1.4.11）。这是 W3C 对相应成功准则的解释文档。本站用自己的例子说明应用，不代表标准机构认可本站，也不等于整站合规评估。