WCAGコントラスト検査
前景色と背景色の相対輝度からコントラスト比を計算し、文字サイズ別のWCAG判定を表示します。
結果
ここに仕上がりが表示されます
入力と設定を確認して、実行してください。サンプルからも始められます。
コピー・保存する前に、内容を確認できます。
入力・処理・結果はこのブラウザ内。ページ移動でも素材を使えます。再読み込み・タブ終了で消えるため、必要な結果は保存してください。
AIエージェントから使うWebMCP 試験対応
このブラウザではWebMCPが有効になっていません。通常のツール操作と下の実行テストはそのまま使えます。
「WCAGコントラスト検査で文字色と背景色を検査する。結果を確認できる形で残してください。」
WebMCPは試験中のWeb標準です。利用には対応ブラウザと対応エージェントが必要です。MCPサーバーの接続URLではありません。AIサービスへ渡す内容は、そのサービスのデータ方針も確認してください。対応状況と使い方
入力仕様を見る · chinouken_color_contrast
{
"type": "object",
"additionalProperties": false,
"properties": {
"foreground": {
"type": "string",
"description": "文字色",
"default": "#1f2937"
},
"background": {
"type": "string",
"description": "背景色",
"default": "#ffffff"
},
"largeText": {
"type": "boolean",
"description": "大きな文字として判定。18pt以上、または太字14pt以上の想定",
"default": false
}
}
}このPCのMCPと接続する
2色を指定
文字色と背景色を入力すると比率と判定を計算します。
実素材でも確認
写真背景、透明色、フォントサイズなど実際の表示条件は別途確認してください。
AIエージェントへの頼み方
Claude CodeやCodexなど、MCPやWebMCPに対応したエージェントに、このページのURLを添えて次のように頼めます。ファイルは会話に添付せず、手元のパスや条件を伝えます。
- 「文字色 #4d6468 と背景 #f8f9f8 のコントラスト比を計算して、本文サイズでWCAG AAを満たすか教えて。」
- 「この配色でAAに届かない組み合わせがあれば、届く近い色を提案して。」