无障碍（设计/标准/检测）指南
无障碍检测工具，基于 W3C WCAG 2.1 标准：提供前景 / 背景颜色对比度计算器（WCAG 1.4.3）与 14 项关键合规清单检测，按可感知 / 可…
🔍 Accessibility Design Guidelines
WCAG 2.1 accessibility checker with a foreground/background contrast calculator and a compliance checklist that grades results at A, AA or AAA.
一、颜色对比度检测（WCAG 1.4.3）
示例文字 The quick brown fox
二、WCAG 2.1 合规清单检测
⚠️ 使用说明与注意事项
- WCAG 2.1对比度要求：正常文字 AA≥4.5:1 / AAA≥7:1；大文字 AA≥3:1 / AAA≥4.5:1
- 对比度公式：(L1+0.05)/(L2+0.05)，L为相对亮度
- 合规等级：A级（基础）→ AA级（推荐）→ AAA级（最佳），需全部满足低级要求才能升级
- 颜色对比度仅是无障碍的一部分，还需关注键盘操作、屏幕阅读器兼容等
- 纯前端运行，数据不会上传到服务器
📚 深度解析：无障碍（设计/标准/检测）指南
💡 常见使用场景
- 颜色对比度检测：录入前景色与背景色的 HEX，按 WCAG 相对亮度公式计算对比度，判定正常/大文字是否满足 AA（4.5/3.0）与 AAA（7.0/4.5）。
- WCAG 2.1 清单检测：勾选 A/AA/AAA 各级别检查项（如替代文本、键盘可达、焦点可见），按通过率给出合规等级与四大原则达成情况。
- 综合无障碍评分：清单得分（权重 0.70）与对比度得分（权重 0.30）加权合成，用于版本合规复核与改版验收。
对比度检测示例
输入：前景 #1F2937、背景 #FFFFFF、正常文字 → 对比度 14.68:1，远超 AAA 级 7.0:1 要求，AA/AAA 均通过。对照：#666666 配白底 5.74:1（仅过 AA）、主题橙 #FF6B35 配白底 2.84:1（不合格，<3.0），说明深色作为正文更安全。
❓ 常见问题（FAQ）
- 对比度多少算达标？
- 正常文字 AA≥4.5:1、AAA≥7.0:1；大文字（≥18pt 或 14pt 粗体）放宽到 AA≥3.0:1、AAA≥4.5:1。低于阈值需调深前景或调浅背景。
- 清单和对比度哪个更关键？
- 两者都重要：对比度只解决「看得见」，清单覆盖「读屏可达、键盘操作、语义结构」等；最终以 A 级为底线、AA 为推荐目标（本工具综合分 ≥75 即无障碍良好）。
▼
工具简介
无障碍检测工具，基于W3C WCAG 2.1标准，提供颜色对比度计算器（WCAG 1.4.3）与14项关键合规清单检测，按可感知/可操作/可理解/健壮四大原则分类评估，自动判定A/AA/AAA合规等级并给出改进建议。
功能特点
- WCAG颜色对比度实时计算（相对亮度公式）
- 正常文字/大文字分别判定AA/AAA
- 14项关键WCAG合规清单（POUR四大原则）
- A/AA/AAA三级合规等级自动判定
- 颜色组合实时预览
- 纯前端处理，数据不上传服务器
使用场景
- 网页/APP无障碍合规检测
- UI设计颜色对比度验证
- 无障碍审计报告生成
- 前端开发自查清单