Zovo Palette Lab
WCAG contrast & palettes
사용해야 할까요
품질 및 안전성
A
도구 정의와 프로토콜 준수에 대한 자동 분석을 기반으로 합니다.
컨텍스트 비용
~3,139토큰 (도구 정의)
~9.9 KB일반적인 응답 크기
상당한 주의 영향 (128k 컨텍스트의 2.45%)
이는 서버의 도구가 모델의 컨텍스트에 로드될 때마다 소비되는 대략적인 토큰 수입니다. 수치가 높을수록 다른 작업에 사용할 수 있는 주의가 줄어듭니다.
설치
원클릭 설치
`claude_desktop_config.json` 파일에 다음을 추가하세요:
{
"mcpServers": {
"contrast-checker": {
"url": "https://contrast-checker.zovo.one/mcp"
}
}
}원격 엔드포인트
https://contrast-checker.zovo.one/mcpstreamable-http할 수 있는 일
도구 목록
도구 (3)
🟢 읽기 전용🟡 쓰기🔴 삭제⚪ 알 수 없음
🟢check_color_contrast(foreground, background, font_size_px, bold, adjust)
Use this when the user wants to know whether a text, icon or border colour has enough contrast against a background: a WCAG contrast checker for one colour pair (e.g. "does white text on #F59E0B pass WCAG AA", "contrast ratio of #767676 on white", "what text color for this background"). Returns the computed WCAG 2.x ratio (truncated to 2 decimals, rounded down), AA/AAA results for normal text, large text and UI components, a verdict for a given font size, APCA Lc as draft information, and the nearest passing colours for AA and AAA (darker and lighter, same OKLCH hue and chroma). Accepts hex, 8-digit hex with alpha, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color(display-p3 ...) and CSS colour names; wide-gamut colours are clipped to sRGB with a note. Does not read colours from images or web pages, resolve CSS variables or currentColor, or check gradients as a whole (check each stop). For 3 or more colours use check_palette_contrast.
입력 스키마
{
"type": "object",
"properties": {
"foreground": {
"type": "string",
"minLength": 1,
"maxLength": 64,
"description": "Text, icon or border colour, e.g. #767676, #1E6FD980 (8-digit hex with alpha), rgb(118, 118, 118), hsl(214 76% 48%), oklch(55% 0.18 255) or a CSS colour name such as navy. Translucent colours are composited over the background."
},
"background": {
"type": "string",
"minLength": 1,
"maxLength": 64,
"description": "Background colour behind it, e.g. #FFFFFF, white or #1E293B. A translucent background is composited over white."
},
"font_size_px": {
"description": "Optional text size in CSS pixels for a single verdict on that text, e.g. 16. 18pt = 24px; 14pt = about 18.66px.",
"type": "number",
"minimum": 1,
"maximum": 500
},
"bold": {
"description": "Optional: true when that text is bold (font-weight 700+), e.g. true. Bold text from 18.66px counts as large text.",
"type": "boolean"
},
"adjust": {
"description": "Which colour the suggested fixes change, e.g. foreground. auto (default) changes the more colourful of the two, so brand colours keep their hue.",
"type": "string",
"enum": [
"auto",
"foreground",
"background"
]
}
},
"required": [
"foreground",
"background"
],
"$schema": "http://json-schema.org/draft-07/schema#"
}출력 스키마
{
"type": "object",
"properties": {
"kind": {
"type": "string",
"const": "contrast"
},
"foreground": {
"type": "object",
"properties": {
"input": {
"type": "string"
},
"hex": {
"type": "string"
},
"alpha": {
"type": "number"
},
"painted": {
"type": "string"
}
},
"required": [
"input",
"hex",
"alpha",
"painted"
],
"additionalProperties": false
},
"background": {
"type": "object",
"properties": {
"input": {
"type": "string"
},
"hex": {
"type": "string"
}
},
"required": [
"input",
"hex"
],
"additionalProperties": false
},
"ratio": {
"type": "number"
},
"ratio_4dp": {
"type": "number"
},
"wcag": {
"type": "object",
"properties": {
"aa_normal": {
"type": "object",
"properties": {
"min": {
"type": "number"
},
"pass": {
"type": "boolean"
}
},
"required": [
"min",
"pass"
],
"additionalProperties": false
},
"aaa_normal": {
"type": "object",
"properties": {
"min": {
"type": "number"
},
"pass": {
"type": "boolean"
}
},
"required": [
"min",
"pass"
],
"additionalProperties": false
},
"aa_large": {
"type": "object",
"properties": {
"min": {
"type": "number"
},
"pass": {
"type": "boolean"
}
},
"required": [
"min",
"pass"
],
"additionalProperties": false
},
"aaa_large": {
"type": "object",
"properties": {
"min": {
"type": "number"
},
"pass": {
"type": "boolean"
}
},
"required": [
"min",
"pass"
],
"additionalProperties": false
},
"ui_components": {
"type": "object",
"properties": {
"min": {
"type": "number"
},
"pass": {
"type": "boolean"
}
},
"required": [
"min",
"pass"
],
"additionalProperties": false
}
},
"required": [
"aa_normal",
"aaa_normal",
"aa_large",
"aaa_large",
"ui_components"
],
"additionalProperties": false
},
"your_text": {
"anyOf": [
{
"type": "object",
"properties": {
"size_px": {
"type": "number"
},
"bold": {
"type": "boolean"
},
"category": {
"type": "string"
},
"aa": {
"type": "object",
"properties": {
"min": {
"type": "number"
},
"pass": {
"type": "boolean"
}
},
"required": [
"min",
"pass"
],
"additionalProperties": false
},
"aaa": {
"type": "object",
"properties": {
"min": {
"type": "number"
},
"pass": {
"type": "boolean"
}
},
"required": [
"min",
"pass"
],
"additionalProperties": false
}
},
"required": [
"size_px",
"bold",
"category",
"aa",
"aaa"
],
"additionalProperties": false
},
{
"type": "null"
}
]
},
"apca": {
"type": "object",
"properties": {
"lc": {
"type": "number"
},
"polarity": {
"type": "string"
},
"note": {
"type": "string"
}
},
"required": [
"lc",
"polarity",
"note"
],
"additionalProperties": false
},
"fixes": {
"type": "object",
"properties": {
"adjusting": {
"type": "string"
},
"kept": {
"type": "string"
},
"aa": {
"type": "object",
"properties": {
"darker": {
"anyOf": [
{
"type": "object",
"properties": {
"hex": {
"type": "string"
},
"ratio": {
"type": "number"
},
"oklch": {
"type": "string"
},
"lightness_change": {
"type": "number"
},
"chroma_reduced": {
"type": "boolean"
},
"unchanged": {
"type": "boolean"
}
},
"required": [
"hex",
"ratio",
"oklch",
"lightness_change",
"chroma_reduced",
"unchanged"
],
"additionalProperties": false
},
{
"type": "null"
}
]
},
"lighter": {
"anyOf": [
{
"type": "object",
"properties": {
"hex": {
"type": "string"
},
"ratio": {
"type": "number"
},
"oklch": {
"type": "string"
},
"lightness_change": {
"type": "number"
},
"chroma_reduced": {
"type": "boolean"
},
"unchanged": {
"type": "boolean"
}
},
"required": [
"hex",
"ratio",
"oklch",
"lightness_change",
"chroma_reduced",
"unchanged"
],
"additionalProperties": false
},
{
"type": "null"
}
]
}
},
"required": [
"darker",
"lighter"
],
"additionalProperties": false
},
"aaa": {
"type": "object",
"properties": {
"darker": {
"anyOf": [
{
"type": "object",
"properties": {
"hex": {
"type": "string"
},
"ratio": {
"type": "number"
},
"oklch": {
"type": "string"
},
"lightness_change": {
"type": "number"
},
"chroma_reduced": {
"type": "boolean"
},
"unchanged": {
"type": "boolean"
}
},
"required": [
"hex",
"ratio",
"oklch",
"lightness_change",
"chroma_reduced",
"unchanged"
],
"additionalProperties": false
},
{
"type": "null"
}
]
},
"lighter": {
"anyOf": [
{
"type": "object",
"properties": {
"hex": {
"type": "string"
},
"ratio": {
"type": "number"
},
"oklch": {
"type": "string"
},
"lightness_change": {
"type": "number"
},
"chroma_reduced": {
"type": "boolean"
},
"unchanged": {
"type": "boolean"
}
},
"required": [
"hex",
"ratio",
"oklch",
"lightness_change",
"chroma_reduced",
"unchanged"
],
"additionalProperties": false
},
{
"type": "null"
}
]
}
},
"required": [
"darker",
"lighter"
],
"additionalProperties": false
}
},
"required": [
"adjusting",
"kept",
"aa",
"aaa"
],
"additionalProperties": false
},
"warnings": {
"type": "array",
"items": {
"type": "string"
}
},
"request": {
"type": "object",
"propertyNames": {
"type": "string"
},
"additionalProperties": {}
}
},
"required": [
"kind",
"foreground",
"background",
"ratio",
"ratio_4dp",
"wcag",
"your_text",
"apca",
"fixes",
"warnings",
"request"
],
"$schema": "http://json-schema.org/draft-07/schema#",
"additionalProperties": false
}🟢check_palette_contrast(colors, names)
Use this when the user has a colour palette (2 to 12 colours) and wants to know which combinations are accessible: "check contrast of my color palette", "which of these colors can I use for text", "accessible color palette checker". Returns the full pairwise WCAG 2.x contrast matrix (ratios truncated, rounded down), which pairs pass AA/AAA for text or 3:1 for large text and UI, and a recommended text colour for each background (a palette colour that passes AA, otherwise black or white). Does not generate new colours; use generate_accessible_palette for a tonal scale and check_color_contrast for fixes to one pair.
입력 스키마
{
"type": "object",
"properties": {
"colors": {
"minItems": 2,
"maxItems": 12,
"type": "array",
"items": {
"type": "string",
"minLength": 1,
"maxLength": 64
},
"description": "2 to 12 colours to test against each other, e.g. [\"#1E6FD9\", \"#F59E0B\", \"#FFFFFF\", \"#111827\"]. Hex, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color(display-p3 ...) or CSS names; translucent colours are composited over white."
},
"names": {
"description": "Optional labels in the same order as colors, e.g. [\"Primary\", \"Accent\", \"Surface\", \"Ink\"].",
"maxItems": 12,
"type": "array",
"items": {
"type": "string",
"maxLength": 40
}
}
},
"required": [
"colors"
],
"$schema": "http://json-schema.org/draft-07/schema#"
}출력 스키마
{
"type": "object",
"properties": {
"kind": {
"type": "string",
"const": "palette"
},
"colors": {
"type": "array",
"items": {
"type": "object",
"properties": {
"name": {
"type": "string"
},
"hex": {
"type": "string"
},
"input": {
"type": "string"
}
},
"required": [
"name",
"hex",
"input"
],
"additionalProperties": false
}
},
"matrix": {
"type": "array",
"items": {
"type": "array",
"items": {
"type": "number"
}
}
},
"summary": {
"type": "object",
"properties": {
"pairs": {
"type": "number"
},
"aaa_text": {
"type": "number"
},
"aa_text": {
"type": "number"
},
"large_text_and_ui_only": {
"type": "number"
},
"fail": {
"type": "number"
}
},
"required": [
"pairs",
"aaa_text",
"aa_text",
"large_text_and_ui_only",
"fail"
],
"additionalProperties": false
},
"text_pairs": {
"type": "array",
"items": {
"type": "object",
"properties": {
"a": {
"type": "number"
},
"b": {
"type": "number"
},
"ratio": {
"type": "number"
},
"level": {
"type": "string"
}
},
"required": [
"a",
"b",
"ratio",
"level"
],
"additionalProperties": false
}
},
"best_text": {
"type": "array",
"items": {
"type": "object",
"properties": {
"background": {
"type": "number"
},
"recommended": {
"type": "string"
},
"recommended_name": {
"type": "string"
},
"ratio": {
"type": "number"
},
"level": {
"type": "string"
},
"source": {
"type": "string"
},
"on_black": {
"type": "number"
},
"on_white": {
"type": "number"
},
"best_palette": {
"type": [
"number",
"null"
]
},
"best_palette_ratio": {
"type": [
"number",
"null"
]
}
},
"required": [
"background",
"recommended",
"recommended_name",
"ratio",
"level",
"source",
"on_black",
"on_white",
"best_palette",
"best_palette_ratio"
],
"additionalProperties": false
}
},
"warnings": {
"type": "array",
"items": {
"type": "string"
}
},
"request": {
"type": "object",
"propertyNames": {
"type": "string"
},
"additionalProperties": {}
}
},
"required": [
"kind",
"colors",
"matrix",
"summary",
"text_pairs",
"best_text",
"warnings",
"request"
],
"$schema": "http://json-schema.org/draft-07/schema#",
"additionalProperties": false
}🟢generate_accessible_palette(base_color, name)
Use this when the user wants an accessible colour scale or palette built from one colour: "color palette generator from hex", "generate a 50-950 scale from #1E6FD9", "tailwind color palette generator", "accessible color palette for my website". Builds an 11-step 50-950 tonal scale in OKLCH with the base hue, where 50-400 pass AA with black text, 500 passes AA with both white and black text, 600 passes AA with white text and 700-950 pass AAA with white text, and each ratio is reported. Returns CSS custom properties and a Tailwind config as downloads. Does not pick colours by mood or brand meaning and does not extract palettes from images.
입력 스키마
{
"type": "object",
"properties": {
"base_color": {
"type": "string",
"minLength": 1,
"maxLength": 64,
"description": "Brand or base colour to build the 50-950 scale from, e.g. #1E6FD9, rgb(30, 111, 217), oklch(55% 0.18 255) or teal."
},
"name": {
"description": "Token name for CSS variables and the Tailwind colour key, e.g. brand (gives --brand-500). Default brand.",
"type": "string",
"maxLength": 32
}
},
"required": [
"base_color"
],
"$schema": "http://json-schema.org/draft-07/schema#"
}출력 스키마
{
"type": "object",
"properties": {
"kind": {
"type": "string",
"const": "scale"
},
"name": {
"type": "string"
},
"base": {
"type": "object",
"properties": {
"input": {
"type": "string"
},
"hex": {
"type": "string"
},
"oklch": {
"type": "string"
},
"on_white": {
"type": "number"
},
"on_black": {
"type": "number"
},
"nearest_step": {
"type": "number"
},
"anchored": {
"type": "boolean"
}
},
"required": [
"input",
"hex",
"oklch",
"on_white",
"on_black",
"nearest_step",
"anchored"
],
"additionalProperties": false
},
"steps": {
"type": "array",
"items": {
"type": "object",
"properties": {
"step": {
"type": "number"
},
"hex": {
"type": "string"
},
"oklch": {
"type": "string"
},
"on_white": {
"type": "number"
},
"on_black": {
"type": "number"
},
"rule": {
"type": "string"
},
"passes": {
"type": "boolean"
},
"anchored": {
"type": "boolean"
},
"chroma_reduced": {
"type": "boolean"
}
},
"required": [
"step",
"hex",
"oklch",
"on_white",
"on_black",
"rule",
"passes",
"anchored",
"chroma_reduced"
],
"additionalProperties": false
}
},
"rules": {
"type": "array",
"items": {
"type": "string"
}
},
"pairs": {
"type": "array",
"items": {
"type": "object",
"properties": {
"text": {
"type": "number"
},
"background": {
"type": "number"
},
"ratio": {
"type": "number"
},
"level": {
"type": "string"
}
},
"required": [
"text",
"background",
"ratio",
"level"
],
"additionalProperties": false
}
},
"css": {
"type": "string"
},
"tailwind": {
"type": "string"
},
"downloads": {
"type": "object",
"properties": {
"css": {
"type": "string"
},
"json": {
"type": "string"
}
},
"required": [
"css",
"json"
],
"additionalProperties": false
},
"warnings": {
"type": "array",
"items": {
"type": "string"
}
},
"request": {
"type": "object",
"propertyNames": {
"type": "string"
},
"additionalProperties": {}
}
},
"required": [
"kind",
"name",
"base",
"steps",
"rules",
"pairs",
"css",
"tailwind",
"downloads",
"warnings",
"request"
],
"$schema": "http://json-schema.org/draft-07/schema#",
"additionalProperties": false
}커뮤니티
증거
최근 관측
검증됨버전이 기록되지 않음도구 3개