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.

Demo of WCAG MCP Server

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

Level	Normal Text	Large Text
AA	4.5:1	3:1
AAA	7:1	4.5:1

Development

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

License

MIT

This server cannot be installed

-

security - not tested

F

license - not found

-

quality - not tested

How are these scores calculated?

Resources

GitHub Repository

Need Help?

Report Issue

Related Servers

WCAG Color Contrast MCP Server