即时检查颜色可恢复性。带有修复建议和 APCA 算法支持的 WCAG 恢复性检查器。
🎯 WCAG Contrast Checker 是一款颜色辅助工具，只需单击一下即可扫描整个页面以查找对比度问题。打开侧面板，立即查看每个不符合 WCAG 合规性的文本元素 — 无需手动测试。
无论您需要验证 WCAG 2.1 对比度合规性还是使用现代 APCA 算法进行测试，此对比度检查器都能满足您的需求。对于页面上的所有文本，aa 对比度检查器和 aaa 对比度检查器结果会立即显示。
✨ 主要特点
1️⃣ 一键页面扫描
单击扩展图标打开侧面板。辅助功能扫描仪会自动检测所有可见文本元素，提取其颜色并计算对比度。无需一一测试元素——立即查看全貌。
2️⃣ 智能分组
具有相同文本颜色和背景颜色的元素被分组在一起，减少视觉混乱。每组都显示示例文本预览、颜色组合和用于快速识别的 CSS 选择器。
3️⃣ WCAG 合规性测试
立即获得 AA 和 AAA 可访问性级别的结果：
• 普通文本（AA 为 4.5:1，AAA 为 7:1）
• 大文本（AA 为 3:1，AAA 为 4.5:1）
• 按通过/失败状态过滤以重点关注问题
4️⃣ APCA算法支持
此 APCA 对比度检查器支持 WCAG 3.0 草案中使用的新感知对比度算法。使用传统对比度和现代 APCA 评分来测试您可访问的颜色。
5️⃣ 修复建议
与其他仅显示通过/失败的对比度检查器不同，此颜色可访问性检查器会建议最接近的通过颜色。单击任何失败的元素即可查看保留原始色调的修复建议。立即应用修复或将 CSS 复制到剪贴板。
6️⃣ 元素突出显示
单击侧面板中的任何结果可滚动页面并使用视觉指示器突出显示该元素。轻松找到需要注意的确切元素。
🔍 如何运作
➤ 单击扩展图标打开侧面板
➤ 自动扫描页面中的所有文本元素
➤ 查看具有对比度的分组结果
➤ 按 AA/AAA 级别、通过/失败状态或文本大小过滤
➤ 单击任何结果以突出显示页面上的元素
➤ 查看修复建议并一键应用
网络可访问性检查器根据视觉权重显示总体可访问性分数 - 较大的文本和更多的内容在计算中具有更大的权重。这有助于您优先考虑对用户影响最大的修复。
📊 可达性得分
对比度计算器根据以下条件提供 0-100 的加权分数：
▸ 每个文本元素的通过/失败状态
▸ 视觉重量（字体大小×文字长度）
▸ 可访问文本与不可访问文本的总覆盖率
通过此分数，您可以快速概览网页的 wcag 合规性状态。
📋 这是给谁的？
此可访问性对比检查器设计用于：
• UX/UI 设计师检查整个页面的颜色可访问性
• Web 开发人员在发布前确保 ADA 合规性
• 无障碍专家进行审核
• QA 团队测试 WCAG 2.1 对比要求
• 满足无障碍标准的企业团队
无论您使用设计系统、组件库还是生产网站，此 wcag 对比检查器都能无缝集成到您的工作流程中。
💡 为什么选择这个对比检查器？
与 WAVE 或 axe 等复杂的辅助功能工具不同，此颜色对比度检查器专注于做好一件事：查找并修复整个页面的对比度问题。
是什么让我们与众不同：
▸ 全页扫描——不是逐个元素测试
▸ 智能分组——减少噪音，显示重要内容
▸ APCA 算法支持——为 WCAG 3.0 做好准备
▸ 修复建议——不仅仅是通过/失败，而是可行的修复
▸ 一键应用——立即修复色彩对比度问题
▸ 加权评分——根据视觉影响确定优先顺序
🔧 技术细节
对比度计算器使用基于相对亮度的官方 WCAG 2.1 公式：
- 亮度计算器计算每种颜色的 L 值
- 对比度 = (L1 + 0.05) / (L2 + 0.05)
- 结果范围从 1:1 到 21:1
对于 APCA，我们使用 SAPC 算法，它可以提供更准确的感知对比度值，特别是对于暗模式界面和彩色文本。
❓ 常见问题
问：什么是颜色对比度检查器？
答：对比度检查器是一种辅助工具，用于测量文本和背景颜色之间的亮度差异。更高的对比度意味着视力障碍用户的可读性更好。
问：WCAG 合规性需要多少对比度？
答：对于 WCAG 2.1 AA 级别，普通文本需要 4.5:1，大文本需要 3:1。 AAA级分别要求7:1和4.5:1。该 WCAG 对比检查器会自动测试所有这些标准。
问：什么是 APCA？
答：APCA（Accessible Perceptual Contrast Algorithm）是为 WCAG 3.0 开发的一种新的对比度计算方法。它提供比当前 wcag 颜色对比度公式更准确的结果，特别是对于深色背景和彩色文本。
问：这与其他工具有何不同？
答：大多数工具需要手动选择元素或显示大量的整页报告。该颜色对比度检查器提供智能分组、可操作的修复建议和一键修复 - 注重效率。
📱 支持
使用 WCAG 对比检查器有问题吗？发现颜色辅助工具中的错误？我们很乐意听取您的意见。使用 Chrome 网上应用店中的支持选项卡联系我们。
立即开始使用此可访问性对比度检查器检查颜色对比度。扫描整个页面，立即发现问题，并一键修复颜色对比度问题。
