做设计与做开发一样,上线前的“自检”往往比事后返工更省时间。下面整理了一组常用的无障碍(A11y)检查与辅助工具,覆盖颜色对比度、WCAG 规则校验、键盘可达性、屏幕阅读器体验、色觉模拟等环节。建议把它们当作走查清单:先用自动化工具扫一遍,再用少量人工测试补齐细节。
工具地址:https://webaim.org/resources/contrastchecker/
免费商用
经典的前景/背景对比度计算器,可直接看到 WCAG AA/AAA 是否达标,适合设计阶段快速定稿颜色。
工具地址:https://accessible-colors.com/
免费商用
在保持色相观感的前提下给出可用的替代色建议,还能快速对比不同组合的可读性。
免费商用
把对比度结果可视化到不同视力/色觉人群模型上,便于做“风险评估”而不是只看一个分数。
需看协议
可通过在线检测或浏览器扩展给出页面结构与可访问性提示(标题层级、替代文本、表单标注等),适合快速定位问题区域。
工具地址:https://www.deque.com/axe/devtools/
需看协议
开发常用的无障碍扫描工具之一,能给出规则解释与修复建议,适合在组件库和页面开发阶段做持续检查。
工具地址:https://developer.chrome.com/docs/lighthouse/
免费商用
Chrome 内置审计工具,包含可访问性评分与常见问题提示,适合作为“上线前的第一道门槛”。
工具地址:https://accessibilityinsights.io/
免费商用
微软出品的检查工具,提供 FastPass 快速扫描与更细的 Assessments 流程,适合做系统性走查。
免费商用
桌面端色觉缺陷模拟工具,适合在设计交付前检查颜色区分是否依赖单一色相。
工具地址:https://michelf.ca/projects/sim-daltonism/
需看协议
在系统层面模拟不同色觉模式,适合和实际界面一起对照检查(尤其是状态色、图表与告警提示)。
工具地址:https://www.nvaccess.org/
免费商用
常用的免费屏幕阅读器。即使你不是重度用户,也建议用它快速体验一次键盘导航与朗读顺序是否合理。
工具地址:https://www.w3.org/WAI/ARIA/apg/
免费商用
这不是“检测器”,但它是组件交互与键盘行为的权威参考。做组件库时对照 APG 能减少很多隐藏坑。
工具地址:https://www.w3.org/WAI/WCAG21/quickref/
免费商用
按原则/指南/成功准则快速筛选查看的参考入口,适合把“可访问性”拆成可执行的检查项。
工具地址:https://www.w3.org/WAI/test-evaluate/preliminary/
免费商用
W3C 提供的快速评估流程,包含键盘可达性、焦点可见性、标题与地标区域等基础项,适合团队形成统一走查节奏。