MCP MeasureMCP Measure

index observed

ContrastKit

WCAG color contrast checks, nearest accessible color, CSS color conversion and palette pair checks.

Should I use this

Quality & Safety

A
Description quality
100%
Schema completeness
100%
Naming quality
95%
Poisoning risk
100%
Permission match
100%
Protocol compliance
100%

Based on automated analysis of tool definitions and protocol compliance.

Context Cost

~2,002Tokens (tool definitions)
~4.1 KBTypical response size
Moderate attention impact (1.56% of 128k context)

This is the approximate number of tokens consumed each time the server's tools are loaded into a model's context. Higher counts reduce the attention available for other tasks.

Install

One-Click Install

Add this to your `claude_desktop_config.json` file:

{
  "mcpServers": {
    "contrastkit": {
      "url": "https://contrastkit.mike-tusa.workers.dev/mcp"
    }
  }
}

Remote endpoints

https://contrastkit.mike-tusa.workers.dev/mcpstreamable-http

What it can do

Tool inventory

Tools (4)

🟢 Read-only🟡 Write🔴 Delete⚪ Unknown
🟢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.

Input Schema

{
  "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
}

Output Schema

{
  "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.

Input Schema

{
  "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
}

Output Schema

{
  "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.

Input Schema

{
  "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
}

Output Schema

{
  "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.

Input Schema

{
  "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
}

Output Schema

{
  "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"
  ]
}

Community

Rate this Server

Evidence

Recent observations

verifiedversion not recorded4 tools