ContrastKit

Working · 1.2 s

dev.workers.mike-tusa.contrastkit/contrastkitv0.1.0 Domain verified

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

Utilities

Website Registry entry

Maintain this server? Claim it

Try it

Call this server's tools from your browser. Nothing to install.

https://contrastkit.mike-tusa.workers.dev/mcp

Requests go through mcptry because browsers can't call most MCP servers directly. Header values are sent to the server for that request only and are never stored or logged.

Tool list from our last check. Connect live to refresh it.

check_contrast Read-only

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.

backgroundstring, required

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

foregroundstring, required

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

Tools (4)

check_contrast

read-only

Argument	Type	Description
background*	string	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".
foreground*	string	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".

Input schema (JSON)

{
  "type": "object",
  "required": [
    "foreground",
    "background"
  ],
  "properties": {
    "background": {
      "type": "string",
      "maxLength": 64,
      "minLength": 1,
      "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\"."
    },
    "foreground": {
      "type": "string",
      "maxLength": 64,
      "minLength": 1,
      "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\"."
    }
  },
  "additionalProperties": false
}

check_palette

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.

read-only

Argument	Type	Description
level	string	WCAG target: aa 4.5:1 (default), aa-large 3:1, aaa 7:1, aaa-large 4.5:1, ui 3:1 (non-text).
colors*	array	2 to 12 CSS colors.

Input schema (JSON)

{
  "type": "object",
  "required": [
    "colors"
  ],
  "properties": {
    "level": {
      "enum": [
        "aa",
        "aa-large",
        "aaa",
        "aaa-large",
        "ui"
      ],
      "type": "string",
      "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)."
    },
    "colors": {
      "type": "array",
      "items": {
        "type": "string",
        "maxLength": 64,
        "minLength": 1,
        "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\"."
      },
      "maxItems": 12,
      "minItems": 2,
      "description": "2 to 12 CSS colors."
    }
  },
  "additionalProperties": false
}

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

read-only

Argument	Type	Description
color*	string	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".

Input schema (JSON)

{
  "type": "object",
  "required": [
    "color"
  ],
  "properties": {
    "color": {
      "type": "string",
      "maxLength": 64,
      "minLength": 1,
      "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\"."
    }
  },
  "additionalProperties": false
}

suggest_accessible_color

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.

read-only

Argument	Type	Description
level	string	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	string	Which color may change.
background*	string	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".
foreground*	string	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".

Input schema (JSON)

{
  "type": "object",
  "required": [
    "foreground",
    "background"
  ],
  "properties": {
    "level": {
      "enum": [
        "aa",
        "aa-large",
        "aaa",
        "aaa-large",
        "ui"
      ],
      "type": "string",
      "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": {
      "enum": [
        "foreground",
        "background",
        "both"
      ],
      "type": "string",
      "default": "foreground",
      "description": "Which color may change."
    },
    "background": {
      "type": "string",
      "maxLength": 64,
      "minLength": 1,
      "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\"."
    },
    "foreground": {
      "type": "string",
      "maxLength": 64,
      "minLength": 1,
      "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\"."
    }
  },
  "additionalProperties": false
}