@weaaare/mcp-a11y-color

MCP (Model Context Protocol) server for color accessibility. Gives AI coding agents the ability to verify, simulate, and suggest accessible colors in real-time while writing code.

Can help cover up to 5 WCAG 2.2 success criteria (1.4.1, 1.4.3, 1.4.6, 1.4.11, 2.4.7).

Tools

| Tool | Description | | --- | --- | | check-contrast | WCAG 2.2 contrast ratio between fg/bg — pass/fail for AA/AAA, normal/large/UI | | get-color-info | Parse any CSS color → hex, RGB, HSL, luminance, contrast on B/W | | suggest-contrast-fix | Given a failing pair, suggest the minimal change to meet target level | | simulate-color-blindness | Simulate colors under 8 types of color vision deficiency | | find-accessible-color | Given background + hue, find a color meeting a target contrast ratio | | apca-contrast | APCA Lc (WCAG 3.0 draft) perceptual contrast score with polarity and usage recommendation | | nearest-color-name | Find the closest CSS named color(s) using perceptual Delta E distance | | analyze-palette-contrast | N×N contrast matrix for a set of colors — essential for design system audits | | generate-cvd-safe-palette | Generate a palette of N colors distinguishable under all CVD types | | analyze-design-tokens | Audit design tokens for WCAG compliance, auto-classify and suggest fixes |

Getting started

Standard config works in most MCP clients:

{
  "mcpServers": {
    "a11y-color": {
      "command": "npx",
      "args": ["-y", "@weaaare/mcp-a11y-color"]
    }
  }
}

Add to your project's .vscode/mcp.json (or user-level settings.json under "mcp"):

{
  "servers": {
    "a11y-color": {
      "command": "npx",
      "args": ["-y", "@weaaare/mcp-a11y-color"]
    }
  }
}

Or install via the VS Code CLI:

code --add-mcp '{"name":"a11y-color","command":"npx","args":["-y","@weaaare/mcp-a11y-color"]}'

Follow the MCP install guide. Add to your claude_desktop_config.json using the standard config above.

claude mcp add a11y-color npx -y @weaaare/mcp-a11y-color

Go to Cursor Settings → MCP → Add new MCP Server. Use command type with npx -y @weaaare/mcp-a11y-color.

Or add to .cursor/mcp.json using the standard config above.

Follow Windsurf MCP documentation. Use the standard config above.

Add to your cline_mcp_settings.json:

{
  "mcpServers": {
    "a11y-color": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@weaaare/mcp-a11y-color"],
      "disabled": false
    }
  }
}

Follow the MCP Servers documentation. Add to .kiro/settings/mcp.json using the standard config above.

codex mcp add a11y-color npx "-y" "@weaaare/mcp-a11y-color"

Or edit ~/.codex/config.toml:

[mcp_servers.a11y-color]
command = "npx"
args = ["-y", "@weaaare/mcp-a11y-color"]

Go to Advanced settings → Extensions → Add custom extension. Use type STDIO and set the command to npx -y @weaaare/mcp-a11y-color.

Go to Settings → AI → Manage MCP Servers → + Add. Use the standard config above.

Follow the MCP install guide. Use the standard config above.

WCAG criteria covered

| SC | Name | Tools | | --- | --- | --- | | 1.4.1 | Use of Color | simulate-color-blindness, generate-cvd-safe-palette | | 1.4.3 | Contrast (Minimum) | check-contrast, suggest-contrast-fix, find-accessible-color, analyze-design-tokens | | 1.4.6 | Contrast (Enhanced) | check-contrast, suggest-contrast-fix, find-accessible-color, apca-contrast | | 1.4.11 | Non-text Contrast | check-contrast, analyze-palette-contrast | | 2.4.7 | Focus Visible | Planned: check-focus-indicator |

Acknowledgements

• W3C — for the WCAG 2.2 guidelines and color contrast success criteria. W3C content is used under the W3C Software and Document License.
• a11ysupport.io — community-driven assistive-technology support data by Michael Fairchild, available under CC BY 4.0.

License

MIT — weAAAre