MCP MeasureMCP Measure

índice observado

ContrastKit

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

¿Debería usar esto?

Calidad y seguridad

A
Calidad de la descripción
100%
Integridad del esquema
100%
Calidad de los nombres
95%
Riesgo de envenenamiento
100%
Coincidencia de permisos
100%
Cumplimiento del protocolo
100%

Basado en el análisis automatizado de las definiciones de herramientas y el cumplimiento del protocolo.

Costo de contexto

~2,002Tokens (definiciones de herramientas)
~4.1 KBTamaño de respuesta típico
Impacto moderado en la atención (1.56% 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": {
    "contrastkit": {
      "url": "https://contrastkit.mike-tusa.workers.dev/mcp"
    }
  }
}

Puntos de conexión remotos

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

Qué puede hacer

Inventario de herramientas

Herramientas (4)

🟢 Solo lectura🟡 Escritura🔴 Eliminación⚪ Desconocido
🟢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.

Esquema de entrada

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

Esquema de salida

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

Esquema de entrada

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

Esquema de salida

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

Esquema de entrada

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

Esquema de salida

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

Esquema de entrada

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

Esquema de salida

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

Comunidad

Califica este servidor

Evidencia

Observaciones recientes

verificadoversión no registrada4 herramientas