如何安装 contrast-checker-mcp？

推荐在 Claude Code（本地）中安装：1. 确保已安装 Claude Code CLI 2. 复制下方命令，将替换为真实环境变量值后，在终端执行 3. 若下方列出了环境变量，请对照填写命令示例：claude mcp add contrast-checker-mcp -- npx -y contrast-checker-mcp

contrast-checker-mcp 适用于哪些场景？

contrast-checker-mcp 适用于：代码审查与 GitHub、Cursor 开发必备。也可在 AgentHub 场景页查看配套 MCP 与 Skill。

AgentHubMCP · Skill

contrast-checker-mcp MCP配置与使用教程 - AgentHub

contrast-checker-mcp MCP配置与使用教程

Q: 如何安装 contrast-checker-mcp？

推荐在 Claude Code（本地） 中安装：1. 确保已安装 Claude Code CLI 2. 复制下方命令，将 替换为真实环境变量值后，在终端执行 3. 若下方列出了环境变量，请对照填写 命令示例：claude mcp add contrast-checker-mcp -- npx -y contrast-checker-mcp

MCP ServerMCP Registry官方收录

io.github.ogSINGH/contrast-checker-mcp · v1.0.1

MCP - WCAG 2.1 color contrast checker - contrast ratios, compliance and accessible color suggestions

源仓库 ↗

产品介绍

MCP - WCAG 2.1 color contrast checker - contrast ratios, compliance and accessible color suggestions contrast-checker-mcp 是一个MCP Server，收录自官方 MCP Registry。支持 stdio 传输。本页提供产品介绍、配置教程、安装命令与适用场景，可复制到 Cursor、Claude Code、VS Code。

适用场景

代码审查与 GitHub Cursor 开发必备

配置教程

打开 contrast-checker-mcp 详情页，确认这是你需要的 MCP Server（来源官方 MCP Registry）。
按客户端选择 Cursor、Claude Code 或 VS Code，复制 JSON 配置或 CLI 命令。
将配置合并进 mcpServers，并把环境变量占位符替换为真实密钥。
重载窗口后，在 Agent 对话中调用该 MCP 提供的工具。

安装命令

以下安装命令与配置步骤已写入页面 HTML，搜索引擎与未启用 JavaScript 的浏览器均可直接读取。

Claude Code（本地）

确保已安装 Claude Code CLI
复制下方命令，将 <占位符> 替换为真实环境变量值后，在终端执行
若下方列出了环境变量，请对照填写

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

Cursor — .cursor/mcp.json（本地）

打开项目根目录下的 .cursor/mcp.json（没有就新建）
点击「复制配置」粘贴进去；若已有其他 MCP，只合并 mcpServers 里的本条目
将 env 中的 <占位符> 替换为真实密钥（见下方「环境变量」）
保存后按 Cmd+Shift+P（Windows：Ctrl+Shift+P）→ 输入 Reload Window 并执行

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

VS Code — .vscode/mcp.json（本地）

Claude Desktop — claude_desktop_config.json（本地）

打开 Claude Desktop 的 claude_desktop_config.json（路径见远程指引）
点击「复制配置」合并到 mcpServers
将 env 中的 <占位符> 替换为真实密钥
完全退出并重启 Claude Desktop

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

Trae — .trae/mcp.json（本地）

打开 Trae → 设置 → MCP，或编辑 .trae/mcp.json / 全局 mcp.json
点击「复制配置」粘贴并合并 mcpServers
将 env 中的 <占位符> 替换为真实密钥
保存后重载 Trae 窗口

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

Cherry Studio — MCP 设置（本地）

打开 Cherry Studio → 设置 → MCP 服务器 → 添加（STDIO）
也可直接导入下方 JSON：点击「复制配置」合并到 mcpServers
将 env 中的 <占位符> 替换为真实密钥，并确保本机已安装 Node.js / uv（npx、uvx）
启用服务并查看工具列表是否加载成功

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

通义灵码 — MCP 配置（本地）

通义灵码：个人设置 → MCP 服务 → 「+」→ 手工添加（STDIO）或配置文件添加
点击「复制配置」合并 mcpServers；命令/参数/环境变量与 JSON 一致
将 env 中的 <占位符> 替换为真实密钥；本机需 Node.js 18+（npx）或已安装 uv（uvx）
确认服务状态为已连接后再在智能体对话中调用

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

Windsurf — mcp_config.json（本地）

编辑 ~/.codeium/windsurf/mcp_config.json
点击「复制配置」合并 mcpServers（本地 stdio 与 Cursor 格式相同）
将 env 中的 <占位符> 替换为真实密钥后保存并刷新 Cascade

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

Cline — MCP Servers（本地）

Cline 面板 → 设置 → MCP Servers
点击「复制配置」粘贴并合并
将 env 中的 <占位符> 替换为真实密钥后保存

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

WorkBuddy — .workbuddy/mcp.json（本地）

编辑 ~/.workbuddy/mcp.json（用户级）或项目目录 .workbuddy/mcp.json
也可在界面：插件 → MCP 服务器 → 配置 MCP，粘贴下方 JSON
将 env 中的 <占位符> 替换为真实密钥；Windows 下 command/脚本路径建议用绝对路径
保存并重启 WorkBuddy，确认连接器状态为绿色

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

按平台快速复制

选择你的平台查看安装方式

打开项目根目录下的 .cursor/mcp.json（没有就新建）
点击「复制配置」粘贴进去；若已有其他 MCP，只合并 mcpServers 里的本条目
将 env 中的 <占位符> 替换为真实密钥（见下方「环境变量」）
保存后按 Cmd+Shift+P（Windows：Ctrl+Shift+P）→ 输入 Reload Window 并执行

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

统一 Manifest

{
  "id": "io.github.ogSINGH/contrast-checker-mcp",
  "type": "mcp-server",
  "version": "1.0.1",
  "displayName": "contrast-checker-mcp",
  "description": "MCP - WCAG 2.1 color contrast checker - contrast ratios, compliance and accessible color suggestions",
  "repository": {
    "url": "https://github.com/ogSINGH/contrast-checker-mcp",
    "source": "github"
  },
  "distribution": {
    "packages": [
      {
        "registryType": "npm",
        "identifier": "contrast-checker-mcp",
        "version": "1.0.1",
        "transport": "stdio"
      }
    ],
    "remotes": []
  },
  "dependencies": [],
  "installTargets": [
    "claude-code",
    "claude-desktop",
    "cursor",
    "vscode",
    "trae",
    "cherry-studio",
    "lingma",
    "windsurf",
    "cline",
    "workbuddy"
  ],
  "keywords": [],
  "provenance": {
    "origin": "official-mcp-registry",
    "originalId": "io.github.ogSINGH/contrast-checker-mcp",
    "originalUrl": "https://registry.modelcontextprotocol.io/v0.1/servers/io.github.ogSINGH%2Fcontrast-checker-mcp/versions/latest",
    "isOfficial": true,
    "status": "active"
  }
}