Zovo Palette Lab
WCAG contrast & palettes
¿Debería usar esto?
Calidad y seguridad
A
Basado en el análisis automatizado de las definiciones de herramientas y el cumplimiento del protocolo.
Costo de contexto
~3,139Tokens (definiciones de herramientas)
~9.9 KBTamaño de respuesta típico
Impacto significativo en la atención (2.45% del contexto de 128k)
Este es el número aproximado de tokens que se consumen cada vez que las herramientas del servidor se cargan en el contexto de un modelo. Los recuentos más altos reducen la atención disponible para otras tareas.
Instalar
Instalación con un clic
Agrega esto a tu archivo `claude_desktop_config.json`:
{
"mcpServers": {
"contrast-checker": {
"url": "https://contrast-checker.zovo.one/mcp"
}
}
}Puntos de conexión remotos
https://contrast-checker.zovo.one/mcpstreamable-httpQué puede hacer
Inventario de herramientas
Herramientas (3)
🟢 Solo lectura🟡 Escritura🔴 Eliminación⚪ Desconocido
🟢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.
Esquema de entrada
{
"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#"
}Esquema de salida
{
"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.
Esquema de entrada
{
"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#"
}Esquema de salida
{
"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.
Esquema de entrada
{
"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#"
}Esquema de salida
{
"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
}Comunidad
Evidencia
Observaciones recientes
verificadoversión no registrada3 herramientas