Swatch

{
  "name": "Swatch",
  "description": "Swatch checks text and background color contrast against WCAG, shows the closest colors that pass, and builds a full 50-950 palette from any color. Runs in your browser, no account.",
  "version": "1.0.1",
  "url": "https://swatch.clawhard.com/a2a",
  "preferredTransport": "JSONRPC",
  "protocolVersion": "1.0",
  "supportedInterfaces": [
    {
      "url": "https://swatch.clawhard.com/a2a",
      "protocolBinding": "JSONRPC",
      "protocolVersion": "1.0"
    },
    {
      "url": "https://swatch.clawhard.com/a2a",
      "protocolBinding": "JSONRPC",
      "protocolVersion": "0.3"
    }
  ],
  "provider": {
    "organization": "Clawhard Studio",
    "url": "https://clawhard.com"
  },
  "iconUrl": "https://clawhard.com/icon-512.png",
  "documentationUrl": "https://swatch.clawhard.com/llms.txt",
  "capabilities": {
    "streaming": false,
    "pushNotifications": false,
    "extendedAgentCard": false
  },
  "defaultInputModes": [
    "application/json",
    "text/plain"
  ],
  "defaultOutputModes": [
    "application/json",
    "text/plain"
  ],
  "skills": [
    {
      "id": "swatch_check_contrast",
      "name": "Check text and background color contrast (WCAG and APCA)",
      "description": "Use when you pick, review or generate UI colors and need an exact accessibility answer. Computes the WCAG 2.x contrast ratio of a text color on a background (never guess ratios, LLMs get them wrong) and returns pass or fail for AA and AAA at normal and large text, the 3:1 UI-component rule, and the APCA Lc score.",
      "tags": [
        "swatch",
        "DesignApplication",
        "read-only"
      ],
      "examples": [
        "Does #777 on white pass WCAG AA?",
        "Make this gray text accessible without changing the look",
        "Build a 50 to 950 palette from #ff5a1f and check the contrast"
      ],
      "inputModes": [
        "application/json",
        "text/plain"
      ],
      "outputModes": [
        "application/json",
        "text/plain"
      ]
    },
    {
      "id": "swatch_fix_contrast",
      "name": "Find the closest colors that pass a contrast target",
      "description": "Use when a color pair fails contrast and you need a replacement that still looks like the original. Returns the nearest passing text color (background fixed) and the nearest passing background (text fixed), keeping hue and changing only lightness, with the new exact ratios. Targets: AA (4.5:1 normal text, default), AAA (7:1), AA-large (3:1 large text), ui (3:1 icons and borders).",
      "tags": [
        "swatch",
        "DesignApplication",
        "read-only"
      ],
      "examples": [
        "Does #777 on white pass WCAG AA?",
        "Make this gray text accessible without changing the look",
        "Build a 50 to 950 palette from #ff5a1f and check the contrast"
      ],
      "inputModes": [
        "application/json",
        "text/plain"
      ],
      "outputModes": [
        "application/json",
        "text/plain"
      ]
    },
    {
      "id": "swatch_pick_text_color",
      "name": "Pick black or white text for a background color",
      "description": "Use when you place text or an icon on a colored surface (button, badge, chip, tag, hero) and need the readable text color. Returns whichever of black or white has the higher contrast ratio, both ratios, the grade, and a softer near-black or near-white option that still passes AA.",
      "tags": [
        "swatch",
        "DesignApplication",
        "read-only"
      ],
      "examples": [
        "Does #777 on white pass WCAG AA?",
        "Make this gray text accessible without changing the look",
        "Build a 50 to 950 palette from #ff5a1f and check the contrast"
      ],
      "inputModes": [
        "application/json",
        "text/plain"
      ],
      "outputModes": [
        "application/json",
        "text/plain"
      ]
    },
    {
      "id": "swatch_make_scale",
      "name": "Build a 50 to 950 color scale from one color",
      "description": "Use when you need a design-token palette from a brand color. Generates an 11-step scale (50, 100 ... 950) in OKLCH so steps look evenly spaced, with your exact color kept as the closest step. Returns each step's hex, contrast on white and black, the best text color on it, and ready-to-paste CSS variables, a Tailwind colors block and JSON.",
      "tags": [
        "swatch",
        "DesignApplication",
        "read-only"
      ],
      "examples": [
        "Does #777 on white pass WCAG AA?",
        "Make this gray text accessible without changing the look",
        "Build a 50 to 950 palette from #ff5a1f and check the contrast"
      ],
      "inputModes": [
        "application/json",
        "text/plain"
      ],
      "outputModes": [
        "application/json",
        "text/plain"
      ]
    },
    {
      "id": "swatch_convert_color",
      "name": "Convert a color between hex, rgb, hsl and oklch",
      "description": "Use when you need the same color in another CSS format, or a color name turned into a value. Returns hex, rgb(), hsl(), oklch(), relative luminance and the nearest CSS color name. Accepts hex, rgb(), hsl(), hwb(), oklch() and CSS names.",
      "tags": [
        "swatch",
        "DesignApplication",
        "read-only"
      ],
      "examples": [
        "Does #777 on white pass WCAG AA?",
        "Make this gray text accessible without changing the look",
        "Build a 50 to 950 palette from #ff5a1f and check the contrast"
      ],
      "inputModes": [
        "application/json",
        "text/plain"
      ],
      "outputModes": [
        "application/json",
        "text/plain"
      ]
    },
    {
      "id": "swatch_check_pairs",
      "name": "Check many foreground and background pairs at once",
      "description": "Use when you need to audit a whole UI or design-token set in one call. Takes up to 50 pairs and returns each pair's ratio, grade and AA/AAA results, plus how many fail AA for normal text. Ideal after you generate a theme or dark mode and want every text-on-surface pair verified.",
      "tags": [
        "swatch",
        "DesignApplication",
        "read-only"
      ],
      "examples": [
        "Does #777 on white pass WCAG AA?",
        "Make this gray text accessible without changing the look",
        "Build a 50 to 950 palette from #ff5a1f and check the contrast"
      ],
      "inputModes": [
        "application/json",
        "text/plain"
      ],
      "outputModes": [
        "application/json",
        "text/plain"
      ]
    }
  ]
}