ContrastKit
WCAG color contrast checks, nearest accessible color, CSS color conversion and palette pair checks.
사용해야 할까요
품질 및 안전성
A
도구 정의와 프로토콜 준수에 대한 자동 분석을 기반으로 합니다.
컨텍스트 비용
~2,002토큰 (도구 정의)
~4.1 KB일반적인 응답 크기
중간 정도의 주의 영향 (128k 컨텍스트의 1.56%)
이는 서버의 도구가 모델의 컨텍스트에 로드될 때마다 소비되는 대략적인 토큰 수입니다. 수치가 높을수록 다른 작업에 사용할 수 있는 주의가 줄어듭니다.
설치
원클릭 설치
`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개