Zovo Palette Lab
WCAG contrast & palettes
Sollte ich dies verwenden
Qualität und Sicherheit
A
Basierend auf einer automatisierten Analyse der Tool-Definitionen und der Einhaltung des Protokolls.
Kontextkosten
~3,139Tokens (Tool-Definitionen)
~9.9 KBTypische Antwortgröße
Erhebliche Auswirkung auf die Aufmerksamkeit (2.45% von 128k Kontext)
Dies ist die ungefähre Anzahl der Tokens, die jedes Mal verbraucht werden, wenn die Tools des Servers in den Kontext eines Modells geladen werden. Höhere Werte verringern die Aufmerksamkeit, die für andere Aufgaben verfügbar ist.
Installieren
Installation mit einem Klick
Fügen Sie dies Ihrer Datei `claude_desktop_config.json` hinzu:
{
"mcpServers": {
"contrast-checker": {
"url": "https://contrast-checker.zovo.one/mcp"
}
}
}Remote-Endpunkte
https://contrast-checker.zovo.one/mcpstreamable-httpWas es kann
Tool-Inventar
Tools (3)
🟢 Nur lesen🟡 Schreiben🔴 Löschen⚪ Unbekannt
🟢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.
Eingabe-Schema
{
"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#"
}Ausgabe-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.
Eingabe-Schema
{
"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#"
}Ausgabe-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.
Eingabe-Schema
{
"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#"
}Ausgabe-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
}Community
Nachweis
Aktuelle Beobachtungen
verifiziertVersion nicht aufgezeichnet3 Tools