12个无障碍与对比度检查工具清单|WCAG 可访问性 与设计自检

做设计与做开发一样,上线前的“自检”往往比事后返工更省时间。下面整理了一组常用的无障碍(A11y)检查与辅助工具,覆盖颜色对比度、WCAG 规则校验、键盘可达性、屏幕阅读器体验、色觉模拟等环节。建议把它们当作走查清单:先用自动化工具扫一遍,再用少量人工测试补齐细节。

WebAIM Contrast Checker

工具地址:https://webaim.org/resources/contrastchecker/

免费商用

经典的前景/背景对比度计算器,可直接看到 WCAG AA/AAA 是否达标,适合设计阶段快速定稿颜色。

Accessible Colors

工具地址:https://accessible-colors.com/

免费商用

在保持色相观感的前提下给出可用的替代色建议,还能快速对比不同组合的可读性。

WhoCanUse

工具地址:https://whocanuse.com/

免费商用

把对比度结果可视化到不同视力/色觉人群模型上,便于做“风险评估”而不是只看一个分数。

WAVE Web Accessibility Evaluation Tool

工具地址:https://wave.webaim.org/

需看协议

可通过在线检测或浏览器扩展给出页面结构与可访问性提示(标题层级、替代文本、表单标注等),适合快速定位问题区域。

axe DevTools

工具地址:https://www.deque.com/axe/devtools/

需看协议

开发常用的无障碍扫描工具之一,能给出规则解释与修复建议,适合在组件库和页面开发阶段做持续检查。

Lighthouse(Accessibility)

工具地址:https://developer.chrome.com/docs/lighthouse/

免费商用

Chrome 内置审计工具,包含可访问性评分与常见问题提示,适合作为“上线前的第一道门槛”。

Accessibility Insights

工具地址:https://accessibilityinsights.io/

免费商用

微软出品的检查工具,提供 FastPass 快速扫描与更细的 Assessments 流程,适合做系统性走查。

Color Oracle(色盲模拟)

工具地址:https://colororacle.org/

免费商用

桌面端色觉缺陷模拟工具,适合在设计交付前检查颜色区分是否依赖单一色相。

Sim Daltonism(macOS/iOS 色觉模拟)

工具地址:https://michelf.ca/projects/sim-daltonism/

需看协议

在系统层面模拟不同色觉模式,适合和实际界面一起对照检查(尤其是状态色、图表与告警提示)。

NVDA Screen Reader(Windows)

工具地址:https://www.nvaccess.org/

免费商用

常用的免费屏幕阅读器。即使你不是重度用户,也建议用它快速体验一次键盘导航与朗读顺序是否合理。

ARIA Authoring Practices Guide(APG)

工具地址:https://www.w3.org/WAI/ARIA/apg/

免费商用

这不是“检测器”,但它是组件交互与键盘行为的权威参考。做组件库时对照 APG 能减少很多隐藏坑。

WCAG Quick Reference

工具地址:https://www.w3.org/WAI/WCAG21/quickref/

免费商用

按原则/指南/成功准则快速筛选查看的参考入口,适合把“可访问性”拆成可执行的检查项。

Keyboard-Only Walkthrough(手动检查要点)

工具地址:https://www.w3.org/WAI/test-evaluate/preliminary/

免费商用

W3C 提供的快速评估流程,包含键盘可达性、焦点可见性、标题与地标区域等基础项,适合团队形成统一走查节奏。

用户评论 (0)

登录后参与讨论

立即登录 注册账号

暂无评论,快来抢沙发吧~

操作成功