contrast-checker-mcp

contrast-checker-mcp

一个为 AI 助手提供颜色对比度检查工具的 MCP 服务。通过标准的 Model Context Protocol 验证是否符合 WCAG 2.1 无障碍标准、计算支持 Alpha 透明度的对比度，并获取无障碍颜色建议。

对比度计算与 WebAIM 的对比度检查器一致，包括 Alpha 合成、WCAG 0.03928 sRGB 阈值，以及截断（而非四舍五入）后的对比度。

工具

check_contrast

检查两种颜色之间的对比度，并评估是否符合 WCAG 2.1 标准。

输入：

• foreground — 前景色（例如 #333、rgb(0,0,0)、rgba(0,0,0,0.5)、navy）
• background — 背景色（例如 #fff、rgb(255,255,255)、white）

输出： 对比度、WCAG 2.1 通过/未通过结果（AA 普通文本、AA 大号文本、AAA 普通文本、AAA 大号文本）以及解析后的颜色值。前景色包含 Alpha 值时，会显示计算中使用的合成后有效颜色。

suggest_accessible_color

建议一种替换颜色，使其符合 WCAG 对比度目标，并尽可能保持与原颜色相近的色相。

输入：

• foreground — 前景色
• background — 背景色
• target_level — "AA" 或 "AAA"（默认值："AA"）
• fix — "foreground" 或 "background"（默认值："foreground"）

输出： 符合目标等级的建议替换颜色（十六进制、rgb、hsl 格式），以及新的对比度。

parse_color

解析颜色字符串，并以多种格式返回。

输入：

• color — 要解析的颜色（例如 #ff6600、rgb(255,102,0)、tomato）

输出： 十六进制、rgb 和 hsl 格式的颜色。

支持的颜色格式

• 十六进制：#rgb、#rrggbb、#rgba、#rrggbbaa
• RGB：rgb(r, g, b)、rgba(r, g, b, a)
• HSL：hsl(h, s%, l%)、hsla(h, s%, l%, a)
• CSS 命名颜色：red、cornflowerblue、rebeccapurple 等。

设置

Claude Desktop

将配置添加到 ~/Library/Application Support/Claude/claude_desktop_config.json（macOS）或 %APPDATA%\Claude\claude_desktop_config.json（Windows）：

{
  "mcpServers": {
    "contrast-checker": {
      "command": "npx",
      "args": ["-y", "contrast-checker-mcp"]
    }
  }
}

Claude Code

claude mcp add contrast-checker npx -y contrast-checker-mcp

Cursor / VS Code

将配置添加到 .cursor/mcp.json 或 .vscode/mcp.json：

{
  "servers": {
    "contrast-checker": {
      "command": "npx",
      "args": ["-y", "contrast-checker-mcp"]
    }
  }
}

从源代码运行

git clone https://github.com/ogSINGH/contrast-checker-mcp.git
cd contrast-checker-mcp
npm install
npm run build
node dist/index.js

示例

白底黑字 — 对比度为 21:1，符合所有 WCAG 等级：

check_contrast({ foreground: "#000000", background: "#ffffff" })

半透明文本 — 检查前先与背景进行 Alpha 合成：

check_contrast({ foreground: "rgba(0,0,0,0.5)", background: "#ffffff" })
→ effective color #808080, ratio 3.94:1

修正未通过检查的颜色组合：

suggest_accessible_color({
  foreground: "#777777",
  background: "#ffffff",
  target_level: "AA"
})
→ suggests #757575 (4.61:1)

许可证

Apache-2.0