ContrastKit
WCAG color contrast checks, nearest accessible color, CSS color conversion and palette pair checks.
我該用這個嗎
品質與安全性
A
根據工具定義與協定合規性的自動化分析。
上下文成本
~2,002Token（工具定義）
~4.1 KB典型回應大小
中等的注意力影響（128k 上下文的 1.56%）
這是每次將伺服器的工具載入模型上下文時所消耗的約略 token 數量。數量越高，可用於其他工作的注意力就越少。
安裝
一鍵安裝
將以下內容加入你的 `claude_desktop_config.json` 檔案：
{
"mcpServers": {
"contrastkit": {
"url": "https://contrastkit.mike-tusa.workers.dev/mcp"
}
}
}遠端端點
https://contrastkit.mike-tusa.workers.dev/mcpstreamable-http它能做什麼
工具清單
工具（4）
🟢 唯讀🟡 寫入🔴 刪除⚪ 未知
🟢check_contrast(foreground, background)
Compute the WCAG 2.x contrast ratio between a text (foreground) color and a background color, with pass/fail for AA, AA large text, AAA, AAA large text and non-text UI (3:1). Handles translucent colors. Read-only. Same engine as GET /api/contrast.
輸入結構描述
{
"type": "object",
"properties": {
"foreground": {
"type": "string",
"minLength": 1,
"maxLength": 64,
"description": "Text / foreground color as a CSS color: \"#1a73e8\", \"#fff\", \"rgb(26 115 232)\", \"hsl(217 80% 51%)\", \"rgba(0,0,0,.6)\" or a name like \"navy\"."
},
"background": {
"type": "string",
"minLength": 1,
"maxLength": 64,
"description": "Background color as a CSS color: \"#1a73e8\", \"#fff\", \"rgb(26 115 232)\", \"hsl(217 80% 51%)\", \"rgba(0,0,0,.6)\" or a name like \"navy\"."
}
},
"required": [
"foreground",
"background"
],
"additionalProperties": false
}輸出結構描述
{
"type": "object",
"properties": {
"foreground": {
"type": "object",
"properties": {
"hex": {
"type": "string"
},
"rgb": {
"type": "string"
},
"hsl": {
"type": "string"
},
"alpha": {
"type": "number"
},
"luminance": {
"type": "number"
}
},
"required": [
"hex",
"rgb",
"hsl",
"alpha",
"luminance"
]
},
"background": {
"type": "object",
"properties": {
"hex": {
"type": "string"
},
"rgb": {
"type": "string"
},
"hsl": {
"type": "string"
},
"alpha": {
"type": "number"
},
"luminance": {
"type": "number"
}
},
"required": [
"hex",
"rgb",
"hsl",
"alpha",
"luminance"
]
},
"effectiveForeground": {
"type": "string"
},
"effectiveBackground": {
"type": "string"
},
"ratio": {
"type": "number"
},
"ratioExact": {
"type": "number"
},
"pass": {
"type": "object",
"properties": {
"aa": {
"type": "boolean"
},
"aa_large": {
"type": "boolean"
},
"aaa": {
"type": "boolean"
},
"aaa_large": {
"type": "boolean"
},
"ui": {
"type": "boolean"
}
},
"required": [
"aa",
"aa_large",
"aaa",
"aaa_large",
"ui"
]
},
"notes": {
"type": "array",
"items": {
"type": "string"
}
},
"version": {
"type": "string"
}
},
"required": [
"ratio",
"pass",
"notes",
"version"
]
}🟢suggest_accessible_color(foreground, background, level, adjust)
For a failing color pair, find the closest color (same hue and saturation, lightness changed as little as possible) that meets the chosen WCAG level. Adjust the foreground (default), the background, or both (best first). Read-only. Same engine as GET /api/suggest.
輸入結構描述
{
"type": "object",
"properties": {
"foreground": {
"type": "string",
"minLength": 1,
"maxLength": 64,
"description": "Text / foreground color as a CSS color: \"#1a73e8\", \"#fff\", \"rgb(26 115 232)\", \"hsl(217 80% 51%)\", \"rgba(0,0,0,.6)\" or a name like \"navy\"."
},
"background": {
"type": "string",
"minLength": 1,
"maxLength": 64,
"description": "Background color as a CSS color: \"#1a73e8\", \"#fff\", \"rgb(26 115 232)\", \"hsl(217 80% 51%)\", \"rgba(0,0,0,.6)\" or a name like \"navy\"."
},
"level": {
"type": "string",
"enum": [
"aa",
"aa-large",
"aaa",
"aaa-large",
"ui"
],
"default": "aa",
"description": "WCAG target: aa 4.5:1 (default), aa-large 3:1, aaa 7:1, aaa-large 4.5:1, ui 3:1 (non-text)."
},
"adjust": {
"type": "string",
"enum": [
"foreground",
"background",
"both"
],
"default": "foreground",
"description": "Which color may change."
}
},
"required": [
"foreground",
"background"
],
"additionalProperties": false
}輸出結構描述
{
"type": "object",
"properties": {
"foreground": {
"type": "object",
"properties": {
"hex": {
"type": "string"
},
"rgb": {
"type": "string"
},
"hsl": {
"type": "string"
},
"alpha": {
"type": "number"
},
"luminance": {
"type": "number"
}
},
"required": [
"hex",
"rgb",
"hsl",
"alpha",
"luminance"
]
},
"background": {
"type": "object",
"properties": {
"hex": {
"type": "string"
},
"rgb": {
"type": "string"
},
"hsl": {
"type": "string"
},
"alpha": {
"type": "number"
},
"luminance": {
"type": "number"
}
},
"required": [
"hex",
"rgb",
"hsl",
"alpha",
"luminance"
]
},
"effectiveForeground": {
"type": "string"
},
"effectiveBackground": {
"type": "string"
},
"ratio": {
"type": "number"
},
"ratioExact": {
"type": "number"
},
"pass": {
"type": "object",
"properties": {
"aa": {
"type": "boolean"
},
"aa_large": {
"type": "boolean"
},
"aaa": {
"type": "boolean"
},
"aaa_large": {
"type": "boolean"
},
"ui": {
"type": "boolean"
}
},
"required": [
"aa",
"aa_large",
"aaa",
"aaa_large",
"ui"
]
},
"notes": {
"type": "array",
"items": {
"type": "string"
}
},
"version": {
"type": "string"
},
"level": {
"type": "string"
},
"target": {
"type": "number"
},
"adjust": {
"type": "string"
},
"alreadyPasses": {
"type": "boolean"
},
"suggestions": {
"type": "array",
"items": {
"type": "object",
"properties": {
"adjust": {
"type": "string"
},
"color": {
"type": "object",
"properties": {
"hex": {
"type": "string"
},
"rgb": {
"type": "string"
},
"hsl": {
"type": "string"
},
"alpha": {
"type": "number"
},
"luminance": {
"type": "number"
}
},
"required": [
"hex",
"rgb",
"hsl",
"alpha",
"luminance"
]
},
"ratio": {
"type": "number"
},
"lightnessChange": {
"type": "number"
}
}
}
}
},
"required": [
"ratio",
"target",
"alreadyPasses",
"suggestions",
"version"
]
}🟢convert_color(color)
Convert a CSS color to hex, rgb() and hsl(), with its relative luminance, its contrast on white and on black, and the better text color (black or white) to put on it. Read-only. Same engine as GET /api/convert.
輸入結構描述
{
"type": "object",
"properties": {
"color": {
"type": "string",
"minLength": 1,
"maxLength": 64,
"description": "Color as a CSS color: \"#1a73e8\", \"#fff\", \"rgb(26 115 232)\", \"hsl(217 80% 51%)\", \"rgba(0,0,0,.6)\" or a name like \"navy\"."
}
},
"required": [
"color"
],
"additionalProperties": false
}輸出結構描述
{
"type": "object",
"properties": {
"input": {
"type": "string"
},
"hex": {
"type": "string"
},
"rgb": {
"type": "string"
},
"hsl": {
"type": "string"
},
"alpha": {
"type": "number"
},
"luminance": {
"type": "number"
},
"contrastOnWhite": {
"type": "number"
},
"contrastOnBlack": {
"type": "number"
},
"bestTextColor": {
"type": "string"
},
"version": {
"type": "string"
}
},
"required": [
"hex",
"luminance",
"bestTextColor",
"version"
]
}🟢check_palette(colors, level)
Contrast ratio for every pair of 2 to 12 colors (up to 66 pairs), highest first, each flagged against the chosen WCAG level. Use it to see which brand colors can be used together for text. Read-only. Same engine as GET /api/palette.
輸入結構描述
{
"type": "object",
"properties": {
"colors": {
"type": "array",
"minItems": 2,
"maxItems": 12,
"items": {
"type": "string",
"minLength": 1,
"maxLength": 64,
"description": "Palette color as a CSS color: \"#1a73e8\", \"#fff\", \"rgb(26 115 232)\", \"hsl(217 80% 51%)\", \"rgba(0,0,0,.6)\" or a name like \"navy\"."
},
"description": "2 to 12 CSS colors."
},
"level": {
"type": "string",
"enum": [
"aa",
"aa-large",
"aaa",
"aaa-large",
"ui"
],
"default": "aa",
"description": "WCAG target: aa 4.5:1 (default), aa-large 3:1, aaa 7:1, aaa-large 4.5:1, ui 3:1 (non-text)."
}
},
"required": [
"colors"
],
"additionalProperties": false
}輸出結構描述
{
"type": "object",
"properties": {
"level": {
"type": "string"
},
"target": {
"type": "number"
},
"colors": {
"type": "array",
"items": {
"type": "string"
}
},
"count": {
"type": "integer"
},
"passing": {
"type": "integer"
},
"pairs": {
"type": "array",
"items": {
"type": "object",
"properties": {
"a": {
"type": "string"
},
"b": {
"type": "string"
},
"ratio": {
"type": "number"
},
"passes": {
"type": "boolean"
}
}
}
},
"notes": {
"type": "array",
"items": {
"type": "string"
}
},
"version": {
"type": "string"
}
},
"required": [
"pairs",
"count",
"passing",
"version"
]
}社群
證據
近期觀測
已驗證未記錄版本4 個工具