WCAG AA合规咨询：未选中复选框对比度要求及优化方案

咱们把你的问题拆开来，一个个说清楚：

1. 未选中的复选框是否需要达到>4.5的对比度才能符合WCAG AA？ #

答案是不需要。WCAG 2.1 AA的对比度要求里，4.5:1是针对普通文本（小于18pt的常规字体）的标准。对于未选中复选框这类非文本控件，要求的是用于指示控件存在的视觉边界（比如复选框的边框），与背景的对比度至少达到3:1——这个标准是为了确保低视力等视觉障碍用户能清晰识别出控件的位置和形态。

2. 未选中复选框对比度过低是否不符合合规标准？ #

如果你的复选框边框和背景的对比度低于3:1，那确实不符合WCAG AA的要求。毕竟用户（尤其是低视力用户）可能很难发现这个控件的存在，即便有配套的文本标签，控件本身的视觉辨识度也得达标才行。

3. 除了改颜色，还有哪些提升合规性的方式？ #

除了调整边框和背景的颜色对比度，这些方法也能有效提升合规性：

• 加粗边框线条：把细边框从1px改成2px甚至更粗，即使对比度稍低，也能大幅提升控件的可见性（当然最好还是尽量接近3:1的标准）
• 强化焦点状态：当用户用Tab键聚焦到复选框时，显示高对比度的焦点轮廓（比如粗边框、阴影或者高亮背景），这能帮助键盘用户快速定位，也能辅助弥补默认状态的些许不足
• 添加辅助视觉标识：在复选框旁的文本标签里补充状态提示（比如「[ ] 同意服务条款」），或者用形状差异强化状态区分（比如未选中用空心方，选中用带实心对勾的方，同时确保对勾和背景的对比度达标）
• 利用阴影/内发光：给复选框边框添加轻微的阴影或内发光效果，增强控件和背景的视觉分离度，提升辨识度

4. Tab聚焦提高对比度，是否足以满足合规要求？ #

不行。聚焦状态的高对比度是针对键盘导航用户的无障碍增强，但它不能替代默认状态下的对比度要求。WCAG要求控件在默认状态下就必须具备足够的辨识度，让所有用户（包括不用键盘导航的用户）都能发现并识别它。聚焦状态的优化是额外的加分项，而非合规的替代方案——默认状态下的边框对比度还是要达到至少3:1的标准。

内容的提问来源于stack exchange，提问作者Brian Genisio