catalog/repos/accesslint--claude-marketplace.md

无障碍访问检测插件

无障碍 WCAG Claude插件 MCP 颜色对比度

AccessLint Claude 插件

一款适用于 Claude Code 和 Claude Desktop 的无障碍工具包，帮助您检查并修复代码库中的 WCAG 2.1 合规性问题。

安装

Claude Code（市场插件）

通过 CLI：

claude plugin marketplace add accesslint/claude-marketplace
claude plugin install accesslint@accesslint

或手动编辑配置文件：

{
  "plugins": [
    {
      "name": "accesslint",
      "source": {
        "source": "github",
        "repo": "accesslint/claude-marketplace",
        "path": "plugins/accesslint"
      }
    }
  ]
}

Claude Desktop（仅 MCP 服务器）

如果您只需要 Claude Desktop 的颜色对比度分析工具：

{
  "mcpServers": {
    "accesslint": {
      "command": "npx",
      "args": ["-y", "@accesslint/mcp"]
    }
  }
}

详情请参阅 MCP 服务器仓库。

功能

智能体

accesslint:reviewer - 无障碍代码审查器

综合性无障碍审计工具，可执行多步骤代码审查。

功能说明：

• 扫描代码库中的 WCAG 2.1 A 级和 AA 级合规性问题
• 遍历代码库以理解完整上下文
• 生成带优先级排序的结构化审计报告
• 提供包含文件位置、严重程度和 WCAG 参考的详细报告
• 包含具体建议和代码示例

使用方式： 使用 Task 工具直接调用智能体：

// 示例：审查某组件的无障碍问题
Task({
  subagent_type: "accesslint:reviewer",
  prompt: "Review src/components/Button.tsx for accessibility issues"
})

可用工具： Read、Glob、Grep，以及用于颜色对比度分析的 MCP 工具

---

技能

accesslint:contrast-checker - 颜色对比度分析

交互式颜色对比度检查工具，可计算 WCAG 对比度并推荐无障碍替代色。

功能说明：

• 计算前景色与背景色之间的对比度
• 检查是否符合 WCAG AA 和 AAA 标准
• 推荐在保留设计风格的前提下符合无障碍要求的替代颜色
• 针对正文、大号文字和 UI 组件提供详细分析

使用方式： 直接调用技能：

// 示例：检查某颜色组合是否符合 WCAG 标准
Skill({ command: "accesslint:contrast-checker" })

该技能提供交互式提示，您可以：

• 输入前景色和背景色（支持 hex、rgb、rgba 格式）
• 指定内容类型（正文、大号文字、UI 组件）
• 选择 WCAG 级别（AA 或 AAA）
• 获取修复违规问题的配色建议

---

accesslint:refactor - 无障碍重构专家

自动修复多个文件中的无障碍问题。

功能说明：

• 识别并修复多个文件中常见的无障碍问题
• 补充缺失的 alt 文本、ARIA 标签和语义化 HTML
• 处理复杂的跨文件重构
• 实现正确的 ARIA 模式和语义化 HTML
• 保持原有功能和代码风格
• 记录所有变更并附带说明

使用方式： 直接调用技能：

// 示例：修复某目录下的无障碍问题
Skill({ skill: "accesslint:refactor" })

可用工具： Read、Write、Edit、Glob、Grep、Skill（可调用 contrast-checker 进行颜色分析）

---

accesslint:use-of-color - WCAG 颜色使用检查器

分析代码是否符合 WCAG 1.4.1 颜色使用规范，识别仅依赖颜色传达信息的情况。

功能说明：

• 检测仅通过颜色区分、无下划线或图标的链接
• 识别仅用颜色显示的表单验证错误
• 发现仅通过颜色标注的必填字段
• 检查仅用颜色表示的状态指示器（成功/错误状态）
• 分析交互元素悬停/聚焦状态仅依赖颜色的情况
• 审查数据可视化中仅用颜色区分数据的情况

使用方式： 直接调用技能：

// 示例：检查组件是否仅用颜色作为唯一指示
Skill({ skill: "accesslint:use-of-color" })

可用工具： Read、Glob、Grep

---

MCP 工具

安装 AccessLint 插件后，所有智能体和技能均可使用以下 MCP 工具：

mcp__plugin_accesslint_accesslint__calculate_contrast_ratio

计算两种颜色之间的 WCAG 对比度。

参数：

• foreground（字符串）：前景色（#RGB、#RRGGBB、rgb()、rgba()）
• background（字符串）：背景色（格式相同）

返回值： 对比度数值

---

mcp__plugin_accesslint_accesslint__analyze_color_pair

分析一对颜色的 WCAG 合规性，提供详细的通过/失败信息。

参数：

• foreground（字符串）：前景色
• background（字符串）：背景色
• contentType（可选）："normal-text" | "large-text" | "ui-component"
• level（可选）："AA" | "AAA"

返回值： 各内容类型的详细通过/失败分析

---

mcp__plugin_accesslint_accesslint__suggest_accessible_color

获取符合 WCAG 要求的无障碍替代颜色建议。

参数：

• foreground（字符串）：当前前景色
• background（字符串）：当前背景色
• targetRatio（数字）：目标对比度（如正文 AA 级为 4.5）
• preserve（可选）："foreground" | "background" | "both"

返回值： 包含对比度的配色建议

---

WCAG 2.1 覆盖范围

本插件检查 A 级和 AA 级合规性，包括：

• 可感知性： alt 文本、语义结构、颜色对比度
• 可操作性： 键盘导航、焦点管理、焦点可见性
• 可理解性： 清晰标签、错误识别、一致性行为
• 健壮性： 正确使用 ARIA、无障碍名称和角色

常见检测问题

• 缺失 alt 属性和 ARIA 标签
• 无效的 ARIA 属性或角色
• 缺失或关联错误的表单标签
• 标题层级不规范
• 非语义化 HTML 使用
• 键盘导航问题
• 颜色对比度不足

相关资源

• WCAG 2.1 指南
• WAI-ARIA 创作实践
• Claude Code 文档
• MCP 服务器仓库
• NPM 包

许可证

MIT