Contrast Checker MCP

Name: Contrast Checker MCP
Author: ogSINGH

作者：ogSINGHバージョン 1.0.1i★ –iパソコンで動く

レジストリ名io.github.ogSINGH/contrast-checker-mcp

インストール

概要

作者による説明（英語の原文）

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

PopNx MCPの3つの柱

この3つを1つのスコアにまとめることはしません。意見、測定、人気はそれぞれ別のものだからです。

利用者の声iレビューはまだありませんレビューは今後のステップで、アカウント機能と一緒に始まります
私たちの基本チェックi1項目中1項目に合格公開情報からチェック。コードはまだスキャンしていません
利用状況iとても新しい↓ 45/週 · ★ –

できること

このサーバーのやさしい解説はまだ書いていません。以下はレジストリから読み取った事実です。

接続方法: パソコンで動く
トランスポート: stdio
カテゴリ: 法律・行政データ

インストール

使っているAIアプリを選んで、設定をコピーしてください。

インストールの前に

基本チェック：1項目中1項目に合格
あなたのパソコンで、あなたのユーザーと同じ権限（ファイル、ネットワーク、アプリ）で動きます。
レジストリには、入力が必要なキーは載っていません。

必要なもの

npmNode.jsのインストール（npxコマンドに必要）

どのアプリを使っていますか？

ClaudeClaude CodeCursorVS CodeChatGPT

上でアプリを選んでください。選んだアプリを覚えておくので、次からはボタンに「…にインストール」と表示されます。

Claude Desktop → Settings → Developer → Edit Config を開き、claude_desktop_config.json にこれを貼り付けます

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

ターミナルでこれを実行します

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

Cursorで開く

または、設定を自分でコピーする

プロジェクトの .cursor/mcp.json、または ~/.cursor/mcp.json に貼り付けます

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

ブラウザがアプリを開いてよいか確認し、そのあとアプリが設定を表示して確認を求めます。キーの値は空欄のままなので、自分で入力してください。

VS Codeで開く

または、設定を自分でコピーする

プロジェクトの .vscode/mcp.json に貼り付けます

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

これはパソコンで動くサーバーですが、ChatGPTがつなげるのはインターネット上のサーバーだけです。ほかのアプリを選んでください。

選んだアプリは、この端末のCookieに保存されます。アカウントは不要です。

この設定は、作者のレジストリ登録情報から作成しています。READMEと違う場合は、READMEに従ってください。

できること

パソコンで動くサーバーです。インストールすると、ツール一覧がAIアプリに表示されます。

基本チェックi

誰でも見られる情報をチェックしており、コードは読んでいません。当てはまらない項目は数に入れていません。 · 2026年11月8日にチェック

✓ 合格
作者とリポジトリが一致
レジストリ名は、リポジトリを所有するGitHubアカウント ogSINGH で確認済みです
… 未チェック
今もメンテナンスされている
このリポジトリはまだGitHubから読み取っていません
… 未チェック
ライセンスがある
このリポジトリはまだGitHubから読み取っていません
– 対象外
エンドポイントが応答する
これはパソコンで動くため、インターネット上のエンドポイントはありません
– 対象外
OAuthでサインイン
パソコンで動き、代わりにローカルの設定を使います
… 未チェック
ツールの説明に隠れた指示がない
パソコンで動くサーバーです。ツール一覧を読み取れるのは、インターネット上のエンドポイントがある場合だけです

法律・行政データのほかのサーバーとの比較i

このカテゴリのほかの1745件のうち0%よりスターが多い
このカテゴリのほかの1745件のうち1%より最近レジストリに公開
基本チェックの結果が、このカテゴリのほかの1745件のうち100%と同じかそれ以上

レジストリでこのカテゴリにある有効なすべてのサーバーと比較しています。スターは、公開者がリポジトリの所有者である場合だけ数えます。

よくある質問

Contrast Checker MCPは安全ですか？

当てはまる基本チェック1項目のうち1項目に合格しました。コードは読んでいません。キーやトークンを追加する前に、サーバーがどんなアクセスを求めているかを確認し、必要な権限だけを持つキーを使ってください。

どんなキーやコードが必要ですか？

レジストリには必須のキーは載っていません。ただし、最初に使うときにサインインを求めるサーバーもあります。

パソコンで動きますか、それともクラウドですか？

あなたのパソコンで動きます。必要なときにAIアプリが起動し、データは作者のサーバーを通りません（サーバー自体がオンラインサービスを呼び出す場合を除きます）。

今もメンテナンスされていますか？

GitHubリポジトリの最終更新は–、最新バージョン（1.0.1）がレジストリに届いたのは9 か月前です。

どのアプリで使えますか？

Claude Desktop、Claude Code、Cursor、VS CodeなどのMCP対応アプリで使えます。パソコンにNode.jsも必要です。

代わりに使えるものは？

同じカテゴリには：USVI Public Records, Spectrum Data Digital, Lintsure

代わりの候補

同じカテゴリで、ほかの作者が作ったサーバー。スターの多い順。

カードの見方：↓ 週あたりのダウンロードi★ GitHubスターi3つの柱：レビュー · チェック · 利用状況i更新＝最新バージョンをレジストリに公開した日i

USVI Public Records

Search and read U.S. Virgin Islands public records: laws, court records, audits, hearings, reports.

作者：usvipublicrecords.com初期今日更新

クラウドで動く✓ usvipublicrecords.com

インストール

Spectrum Data Digital

Sanctions screening, SAM.gov contract leads and new UK company checks for AI agents and Claude.

作者：spectrumdatadigitalとても新しい今日更新

クラウドで動く

インストール

Lintsure

Compliance readiness checks for code: EU AI Act, GDPR, SOC 2, ISO 27001. Local. Not legal advice.

作者：lintsureとても新しい今日更新

パソコンで動く

インストール

作者のREADME

READMEを開く

作者のリポジトリから書かれたとおりにコピーしたものです。PopNx MCPは内容を確認・推奨していません。HTML、画像、スクリプトは取り除いています。リンクはこのサイトの外へ移動します。

contrast-checker-mcp

An MCP server that provides color contrast checking tools for AI assistants. Verify WCAG 2.1 accessibility compliance, compute contrast ratios with alpha transparency support, and get accessible color suggestions — all via the standard Model Context Protocol.

Contrast calculations match WebAIM's contrast checker — including alpha compositing, WCAG 0.03928 sRGB threshold, and truncated (not rounded) ratios.

Tools

`check_contrast`

Check the contrast ratio between two colors and evaluate WCAG 2.1 compliance.

Inputs:

foreground — Foreground color (e.g. #333, rgb(0,0,0), rgba(0,0,0,0.5), navy)
background — Background color (e.g. #fff, rgb(255,255,255), white)

Output: Contrast ratio, WCAG 2.1 pass/fail results (AA normal, AA large, AAA normal, AAA large), parsed color values. When the foreground has alpha, shows the effective composited color used for the calculation.

`suggest_accessible_color`

Suggest a replacement color that meets a WCAG contrast target, keeping the hue as close to the original as possible.

Inputs:

foreground — Foreground color
background — Background color
target_level — "AA" or "AAA" (default: "AA")
fix — "foreground" or "background" (default: "foreground")

Output: A suggested replacement color (in hex, rgb, hsl) that meets the target level, along with the new contrast ratio.

`parse_color`

Parse a color string and return it in multiple formats.

Inputs:

color — Color to parse (e.g. #ff6600, rgb(255,102,0), tomato)

Output: The color in hex, rgb, and hsl formats.

Supported Color Formats

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 named colors: red, cornflowerblue, rebeccapurple, etc.

Setup

Claude Desktop

Add to ~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %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

Add to .cursor/mcp.json or .vscode/mcp.json:

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

From source

git clone https://github.com/ogSINGH/contrast-checker-mcp.git

cd contrast-checker-mcp npm install npm run build node dist/index.js

Examples

Black on white — 21:1 ratio, all WCAG levels pass:

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

Semi-transparent text — alpha composited onto background before checking:

check_contrast({ foreground: "rgba(0,0,0,0.5)", background: "#ffffff" })

→ effective color #808080, ratio 3.94:1

Fix a failing color pair:

suggest_accessible_color({

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

License

Apache-2.0

Contrast Checker MCP

概要

PopNx MCPの3つの柱

できること

インストール

インストールの前に

できること

基本チェックi

作者とリポジトリが一致

今もメンテナンスされている

ライセンスがある

エンドポイントが応答する

OAuthでサインイン

ツールの説明に隠れた指示がない

法律・行政データのほかのサーバーとの比較i

よくある質問

代わりの候補

USVI Public Records

Spectrum Data Digital

Lintsure

作者のREADME

contrast-checker-mcp

Tools

check_contrast

suggest_accessible_color

parse_color

Supported Color Formats

Setup

Claude Desktop

Claude Code

Cursor / VS Code

From source

Examples

License

`check_contrast`

`suggest_accessible_color`

`parse_color`