contrast-checker-mcp

contrast-checker-mcp

AI アシスタント向けに色のコントラストチェックツールを提供する MCP サーバーです。WCAG 2.1 のアクセシビリティ準拠を確認し、アルファ透明度に対応したコントラスト比を計算し、アクセシブルな色の候補を取得できます。すべて標準の Model Context Protocol を通じて利用できます。

コントラスト計算は、アルファ合成、WCAG の 0.03928 sRGB しきい値、比率を丸めずに切り捨てる処理を含め、WebAIM のコントラストチェッカーと一致します。

ツール

check_contrast

2 色間のコントラスト比を確認し、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 大）、解析した色の値。前景色にアルファ値がある場合は、計算に使用した合成後の色も表示します。

suggest_accessible_color

色相をできるだけ元の色に近づけながら、WCAG のコントラスト目標を満たす置き換え色を提案します。

入力：

• foreground — 前景色
• background — 背景色
• target_level — "AA" または "AAA"（デフォルト："AA"）
• fix — "foreground" または "background"（デフォルト："foreground"）

出力： 目標レベルを満たす置き換え色（hex、rgb、hsl 形式）と、新しいコントラスト比を提示します。

parse_color

色の文字列を解析し、複数の形式で返します。

入力：

• color — 解析する色（例：#ff6600、rgb(255,102,0)、tomato）

出力： hex、rgb、hsl 形式の色。

対応する色の形式

• Hex：#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" })

半透明のテキスト — チェック前に背景色にアルファ合成します：

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