MCP MeasureMCP Measure

Index beobachtet

ContrastKit

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

Sollte ich dies verwenden

Qualität und Sicherheit

A
Qualität der Beschreibung
100%
Vollständigkeit des Schemas
100%
Qualität der Benennung
95%
Risiko der Vergiftung
100%
Übereinstimmung der Berechtigungen
100%
Einhaltung des Protokolls
100%

Basierend auf einer automatisierten Analyse der Tool-Definitionen und der Einhaltung des Protokolls.

Kontextkosten

~2,002Tokens (Tool-Definitionen)
~4.1 KBTypische Antwortgröße
Mittlere Auswirkung auf die Aufmerksamkeit (1.56% 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": {
    "contrastkit": {
      "url": "https://contrastkit.mike-tusa.workers.dev/mcp"
    }
  }
}

Remote-Endpunkte

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

Was es kann

Tool-Inventar

Tools (4)

🟢 Nur lesen🟡 Schreiben🔴 Löschen⚪ Unbekannt
🟢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.

Eingabe-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
}

Ausgabe-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.

Eingabe-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
}

Ausgabe-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.

Eingabe-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
}

Ausgabe-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.

Eingabe-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
}

Ausgabe-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

Diesen Server bewerten

Nachweis

Aktuelle Beobachtungen

verifiziertVersion nicht aufgezeichnet4 Tools