Area Contrast Checker

什么是 Area Contrast Checker？

Area Contrast Checker 是一款 Chrome 扩展，通过拖拽选择页面中的区域来检查渲染后的网页内容色彩对比度。它不只依赖计算后的 CSS 值或手动取色器，而是采样可见页面上的实际像素，以估算前景色和背景色。

该工具专为无障碍审查而设计，适用于图片、渐变、叠层、Canvas 内容以及其他分层界面的对比检查。它会报告 WCAG 2.1/2.2 对比结果和 APCA 数值，并在所选区域未达到对比目标时提供颜色建议。

主要功能

• 基于区域的像素分析：用户拖拽选区，扩展会采样渲染像素，从实际可见内容中推断前景色和背景色。
• WCAG 2.1 和 2.2 检查：针对普通文本、大号文本和 UI 组件，按成功准则 1.4.3 和 1.4.11 评估对比度。
• 支持 APCA：显示 APCA Lc 值，方便按与 WCAG 3.0 讨论相关的方法评估对比度。
• 保留色相的颜色建议：当对比度不足时，扩展可建议在保持原始色相的同时提升对比度的替代颜色。
• 多种颜色格式：可查看并复制 HEX、RGB、HSL 和 OKLCH 格式的颜色。
• 手动取色模式：当自动区域分析不够时，用户可通过选择特定像素微调结果。
• 页面交互模式：在 Windows 上按住 Alt，或在 Mac 上按住 Option，可临时恢复页面交互，方便用户点击、悬停或导航，而无需退出检查器。
• Retina 和高 DPI 支持：采样会考虑设备像素比，以提高高分辨率屏幕上的精度。

如何使用 Area Contrast Checker

1. 点击扩展图标启动检查器。
2. 在要检查的页面区域上拖拽。
3. 查看工具显示的对比度、WCAG 结果或 APCA 值。
4. 如有需要，切换到手动取色模式，或按偏好的格式复制检测到的颜色。

使用场景

• 用于营销页面或产品界面的无障碍审计，尤其是文本位于渐变、图片或分层背景上的场景。
• 设计评审时，帮助设计师检查所选前景色和背景色组合是否满足 WCAG 目标。
• 检查按钮、标签及其他需要验证与相邻背景对比度的 UI 组件。
• 适用于 Canvas 或插画较多的页面，此时基于 DOM 的对比工具可能无法反映实际渲染结果。
• 需要快速微调颜色、并寻找接近原始色相但更安全的对比替代方案时。

常见问题

• Area Contrast Checker 分析的是页面 DOM 还是渲染后的屏幕？它分析的是所选区域的渲染像素，这有助于反映用户实际看到的内容。
• 它支持 WCAG 和 APCA 吗？支持。页面说明支持 WCAG 2.1/2.2 检查和 APCA Lc 值。
• 它能处理图片和渐变吗？产品说明明确指出，像素分析可稳定用于图片和渐变，也提到了叠层、Canvas 元素和复杂视觉层。
• 我可以复制检测到的颜色吗？可以。扩展包含复制控件，并支持 HEX、RGB、HSL 和 OKLCH 格式。
• 这个工具能保证无障碍合规吗？不能。来源说明颜色检测是基于像素分布的估算，最终合规判断应单独验证。

替代方案

• 取色器：可手动采样特定颜色，单次更精确，但重复检查时速度较慢。
• 自动无障碍扫描器：适合对整页进行大范围审计，但可能难以处理图片、渐变和其他渲染效果。
• 基于元素的对比检查器：读取计算后的 HTML/CSS 值，适合简单布局，但在涉及透明度或重叠图层时，可能与最终屏幕渲染不一致。
• 使用设计工具进行手动视觉检查：设计师可在设计或图形工具中直接查看颜色，但通常与实时网页和无障碍标准的集成较弱。