Swatch

Working · 27 ms Security A

com.clawhard/swatchv1.0.1 Domain verified

Check WCAG color contrast, fix failing colors, build 50-950 palettes. No account.

Design & Creative

Watch Website Registry entry

Maintain this server? Claim it

Try it

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

https://swatch.clawhard.com/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.

swatch_check_contrast Read-only

Use when the user asks whether a color combination is readable or accessible, passes WCAG AA or AAA, or has enough contrast (text on a background, button, badge, link color). Returns the exact contrast ratio, pass or fail for normal text, large text and UI components at AA and AAA, the APCA lightness contrast and a plain note. Colors can be hex, rgb(), hsl() or CSS names. Example: {"foreground": "#777777", "background": "#ffffff"}. Language models cannot compute this reliably, so call it instead of guessing.

backgroundstring, required

Background color, e.g. "#ffffff".

foregroundstring, required

Text (or icon) color, e.g. "#767676" or "rgb(20 20 20)" or "tomato".

Tools (6)

swatch_check_contrast

read-only

Argument	Type	Description
background*	string	Background color, e.g. "#ffffff".
foreground*	string	Text (or icon) color, e.g. "#767676" or "rgb(20 20 20)" or "tomato".

Input schema (JSON)

{
  "type": "object",
  "required": [
    "foreground",
    "background"
  ],
  "properties": {
    "background": {
      "type": "string",
      "maxLength": 80,
      "minLength": 1,
      "description": "Background color, e.g. \"#ffffff\"."
    },
    "foreground": {
      "type": "string",
      "maxLength": 80,
      "minLength": 1,
      "description": "Text (or icon) color, e.g. \"#767676\" or \"rgb(20 20 20)\" or \"tomato\"."
    }
  }
}

swatch_check_pairs

Use when the user has a whole design system, theme or stylesheet and wants every text and background pair checked for accessibility in one go. Takes up to 50 pairs and returns the ratio and AA and AAA results for each, with a count of failures. Example: {"pairs": [{"foreground": "#777", "background": "#fff", "label": "muted text"}, {"foreground": "#fff", "background": "#ff5a1f", "label": "button"}]}.

read-only

Argument	Type	Description
pairs*	array	Pairs to check.

Input schema (JSON)

{
  "type": "object",
  "required": [
    "pairs"
  ],
  "properties": {
    "pairs": {
      "type": "array",
      "items": {
        "type": "object",
        "required": [
          "foreground",
          "background"
        ],
        "properties": {
          "label": {
            "type": "string",
            "maxLength": 60,
            "description": "Optional name, like \"muted text on card\"."
          },
          "background": {
            "type": "string",
            "maxLength": 80,
            "minLength": 1
          },
          "foreground": {
            "type": "string",
            "maxLength": 80,
            "minLength": 1
          }
        }
      },
      "maxItems": 50,
      "minItems": 1,
      "description": "Pairs to check."
    }
  }
}

swatch_convert_color

Use when the user asks to convert a color between hex, RGB, HSL and OKLCH, or asks what a color is called or how light it is. Returns all formats, the relative luminance and the nearest CSS color name. Example: {"color": "#ff5a1f"}. Exact math, so prefer it to converting by hand.

read-only

Argument	Type	Description
color*	string	Any CSS color.

Input schema (JSON)

{
  "type": "object",
  "required": [
    "color"
  ],
  "properties": {
    "color": {
      "type": "string",
      "maxLength": 80,
      "minLength": 1,
      "description": "Any CSS color."
    }
  }
}

swatch_fix_contrast

Use when a color pair fails contrast and the user wants the smallest change that makes it pass, such as "make this gray text accessible without changing the look". Returns the closest text color on that background that reaches the target (AA, AAA, AA-large or ui), and separately the closest background, keeping the hue. Example: {"foreground": "#777777", "background": "#ffffff", "target": "AA"}. Returns already_passes if nothing needs to change.

read-only

Argument	Type	Description
target	string	Contrast target. Default AA.
background*	string	Current background color.
foreground*	string	Current text color.

Input schema (JSON)

{
  "type": "object",
  "required": [
    "foreground",
    "background"
  ],
  "properties": {
    "target": {
      "enum": [
        "AA",
        "AAA",
        "AA-large",
        "ui"
      ],
      "type": "string",
      "description": "Contrast target. Default AA."
    },
    "background": {
      "type": "string",
      "maxLength": 80,
      "minLength": 1,
      "description": "Current background color."
    },
    "foreground": {
      "type": "string",
      "maxLength": 80,
      "minLength": 1,
      "description": "Current text color."
    }
  }
}

swatch_make_scale

Use when the user asks for a palette, shades, tints, a design-token scale or a Tailwind-style 50 to 950 ramp from a brand color. Returns 11 steps that keep the hue, with the hex, contrast on white and on black, and the best text color for each step. Example: {"color": "#ff5a1f", "name": "brand"}.

read-only

Argument	Type	Description
name	string	Token name used in the CSS and Tailwind output. Default "brand".
color*	string	Base color, e.g. "#ff5a1f".

Input schema (JSON)

{
  "type": "object",
  "required": [
    "color"
  ],
  "properties": {
    "name": {
      "type": "string",
      "maxLength": 24,
      "description": "Token name used in the CSS and Tailwind output. Default \"brand\"."
    },
    "color": {
      "type": "string",
      "maxLength": 80,
      "minLength": 1,
      "description": "Base color, e.g. \"#ff5a1f\"."
    }
  }
}

swatch_pick_text_color

Use when the user asks what text color (black or white) to put on a given background, button or brand color so it is readable. Returns the better of black or white with both contrast ratios, the WCAG grade and a softer near-black option. Example: {"background": "#ff5a1f"}.

read-only

Argument	Type	Description
background*	string	The surface color the text sits on.

Input schema (JSON)

{
  "type": "object",
  "required": [
    "background"
  ],
  "properties": {
    "background": {
      "type": "string",
      "maxLength": 80,
      "minLength": 1,
      "description": "The surface color the text sits on."
    }
  }
}

Swatch

Try it

swatch_check_contrast Read-only

Swatch

Try it

swatch_check_contrast Read-only

Install

Tools (6)

Security checkA100/100