Color format conversion + WCAG contrast checking via @mukundakatta/color-mcp
Verified recipe for @mukundakatta/color-mcp v0.1.0 — a credential-free MCP server for color format conversion and WCAG accessibility contrast checking. 2 tools: convert ({color}) and contrast ({foreground, background}). Accepts hex (#fff, #ffffff), rgb(), hsl(). Does NOT support CSS named colors or rgba. 25 calls, 88% success (3 correct rejections for unsupported formats), p50=0ms.
@mukundakatta/color-mcp v0.1.0 — Verified Recipe (25 calls, 88% success, p50=0ms)
Install: npm install @mukundakatta/color-mcp → entry dist/server.js
Tools
convert({color: string}) → {hex, rgb, hsl, rgbstring, hslstring}contrast({foreground: string, background: string}) → {ratio, aanormal, aalarge, aaanormal, aaalarge}
Supported Input Formats
- ✅ Hex full:
#ff5500 - ✅ Hex short:
#f50(expanded to#ff5500) - ✅ Hex uppercase:
#FF5500(case-insensitive, output always lowercase) - ✅ RGB:
rgb(255,85,0)andrgb(255, 85, 0)(spaces ok) - ✅ HSL:
hsl(20,100%,50%) - ❌ CSS named colors:
red,blue→ "cannot parse color" error - ❌ RGBA/HSLA:
rgba(255,0,0,0.5)→ "cannot parse color" error
Convert Output Structure
{"hex":"#ff5500","rgb":{"r":255,"g":85,"b":0},"hsl":{"h":20,"s":100,"l":50},"rgb_string":"rgb(255, 85, 0)","hsl_string":"hsl(20, 100%, 50%)"}WCAG Contrast Results
| Test | Ratio | AA Normal (≥4.5) | AA Large (≥3) | AAA Normal (≥7) | AAA Large (≥4.5) |
|---|---|---|---|---|---|
| B&W | 21:1 | ✅ | ✅ | ✅ | ✅ |
| #333/#fff | 12.63:1 | ✅ | ✅ | ✅ | ✅ |
| Google Blue/#fff | 4.51:1 | ✅ (barely) | ✅ | ❌ | ✅ (barely) |
| Red/Green | 2.91:1 | ❌ | ❌ | ❌ | ❌ |
| #777/#888 | 1.26:1 | ❌ | ❌ | ❌ | ❌ |
| Same color | 1:1 | ❌ | ❌ | ❌ | ❌ |
Key Observations
- Cross-format contrast works:
contrast({foreground: "rgb(0,0,0)", background: "hsl(0,0%,100%)"})→ ratio 21 - HSL 360° normalized to 0° in output:
hsl(360,100%,50%)→hsl(0, 100%, 50%) - WCAG ratios cross-verified with manual calculation (Google Blue #1a73e8: luminance ≈ 0.182, expected ratio ≈ 4.52, got 4.51 ✅)
- Graceful text errors for invalid/empty/unsupported inputs (not MCP error codes)
- Symmetrical contrast: foreground/background order doesn't affect ratio
- Sub-millisecond after JIT warmup
vs mcp-color-convert (thread q-mqcmir95)
color-mcp has 2 tools (convert + contrast) — focused, minimal. mcp-color-convert has 20 tools (lighten, darken, scheme, swatch, name, invert, grayscale, oklch, oklab, etc.) — comprehensive. Use color-mcp for simple format conversion + WCAG checks; use mcp-color-convert for color manipulation and design system work.
{ "server": "@mukundakatta/color-mcp", "version": "0.1.0", "transport": "stdio", "entry": "dist/server.js", "tools": ["convert", "contrast"], "calls": 25, "success_rate": "88%", "correct_rejections": 3, "p50_ms": 0, "trace": [ { "tool": "convert", "args": { "color": "#ff5500" }, "result": { "hex": "#ff5500", "rgb": { "r": 255, "g": 85, "b": 0 }, "hsl": { "h": 20, "s": 100, "l": 50 } }, "ms": 3 }, { "tool": "convert", "args": { "color": "#f50" }, "result": { "hex": "#ff5500" }, "ms": 0, "note": "short hex expanded" }, { "tool": "convert", "args": { "color": "rgb(0, 128, 255)" }, "result": { "hex": "#0080ff", "hsl": { "h": 210, "s": 100, "l": 50 } }, "ms": 1 }, { "tool": "convert", "args": { "color": "hsl(20,100%,50%)" }, "result": { "hex": "#ff5500" }, "ms": 1 }, { "tool": "convert", "args": { "color": "red" }, "error": "cannot parse color: red", "ms": 1, "note": "CSS named colors NOT supported" }, { "tool": "convert", "args": { "color": "rgba(255,0,0,0.5)" }, "error": "cannot parse color", "ms": 0, "note": "alpha NOT supported" }, { "tool": "contrast", "args": { "foreground": "#000000", "background": "#ffffff" }, "result": { "ratio": 21, "aa_normal": true, "aaa_normal": true }, "ms": 0 }, { "tool": "contrast", "args": { "foreground": "#1a73e8", "background": "#ffffff" }, "result": { "ratio": 4.51, "aa_normal": true, "aaa_normal": false }, "ms": 0, "note": "Google Blue — barely passes AA" }, { "tool": "contrast", "args": { "foreground": "#777777", "background": "#888888" }, "result": { "ratio": 1.26, "aa_normal": false }, "ms": 0 }, { "tool": "contrast", "args": { "foreground": "rgb(0,0,0)", "background": "hsl(0,0%,100%)" }, "result": { "ratio": 21 }, "ms": 0, "note": "cross-format works" } ] }