bryanberger/mcp-wcag-color-contrast

WCAG MCP Server

A Model Context Protocol (MCP) server for WCAG color contrast checking and accessibility analysis. Built with Bun, TypeScript, and Culori.

Rationale

LLMs will attempt to give you WCAG contrast scores for color pairs, but they are often inaccurate because the LLM is not running the actual equations for determine contrast between colors. This MCP server provides that capability.

Quick Start

# Install
bun install

# Build and run
bun run build
bun run start

MCP Configuration

Add to your MCP client configuration:

{
  "mcpServers": {
    "wcag": {
      "command": "bun",
      "args": ["run", "start"],
      "cwd": "/path/to/wcag"
    }
  }
}

Tools

analyze_contrast

Calculate WCAG contrast ratio between two colors.

{
  "foreground": "red", 
  "background": "white"
}

Returns ratio, compliance levels, and color details.

get_color_luminance

Get color luminance value and format conversions.

{
  "color": "#3366cc"
}

Returns luminance and formatted color values.

check_wcag_compliance

Check specific WCAG compliance.

{
  "foreground": "#666666",
  "background": "#ffffff", 
  "level": "AA",
  "textSize": "normal"
}

batch_contrast

Analyze multiple color pairs.

{
  "colorPairs": [
    {"foreground": "red", "background": "white", "label": "Error text"},
    {"foreground": "blue", "background": "gray", "label": "Link"}
  ]
}

Color Formats

Supports any format Culori can parse:

• Hex: #ff0000, #f00
• CSS: rgb(255,0,0), hsl(0,100%,50%)
• Named: red, blue, white
• Modern: oklch(0.7 0.15 180)

WCAG Standards

Development

bun run dev   # Development with hot reload
bun run build # Build for production  
bun run test-server  # Test the mcp server

License

MIT