Swatch No account · runs in your browser

Contrast, checked properly

Is your text readable?

Pick a text color and a background. Swatch gives the exact WCAG ratio, pass or fail for AA and AAA, and the closest colors that pass. Then turn any color into a full palette.

Try one
The numbers

4.5 for text, 3 for big and UI.

AA needs 4.5:1 for normal text and 3:1 for large text, icons and input borders. AAA needs 7:1 and 4.5:1. Swatch never rounds up: 4.499 fails.

The fix

Same color, one notch darker.

When a pair fails, Swatch keeps the hue and moves only the lightness to the nearest value that passes, so your color still feels like your color.

Private

Nothing leaves your device.

The colors you type stay in your browser. There is no account.

Use Swatch with your AI

Add Swatch to ChatGPT, Claude, Cursor or any assistant that supports MCP, then ask it to check text and background color contrast, fix failing colors and build palettes. No key, no login.

https://swatch.clawhard.com/mcp
Add to CursorAdd to VS CodeAdd to Claude
More ways to connect

Claude Code

claude mcp add --transport http clawhard-swatch https://swatch.clawhard.com/mcp

Codex

codex mcp add clawhard-swatch --url https://swatch.clawhard.com/mcp

Gemini CLI

gemini mcp add --transport http clawhard-swatch https://swatch.clawhard.com/mcp

Cursor, Windsurf and others (mcp.json)

{
  "mcpServers": {
    "clawhard-swatch": { "url": "https://swatch.clawhard.com/mcp" }
  }
}

ChatGPT

Open Plugins → Add → Add custom MCP server, paste the URL above, choose No authentication, then create it.

Other apps: Goose · LM Studio. Any MCP client works with the URL (Streamable HTTP, no headers).

OpenAPI (custom GPT Actions, scripts) · llms.txt · MCP server card · Agent card · All Clawhard tools in one connector

Common questions

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.

What contrast ratio do I need for accessible text?

WCAG 2.2 level AA needs 4.5:1 for normal text and 3:1 for large text (24px, or 18.66px bold) and for UI components like icons and input borders. Level AAA needs 7:1 for normal text and 4.5:1 for large text. Swatch shows all of these for any pair.

Does #777777 on white pass AA?

No. #777777 on white is 4.48:1, just under 4.5:1. #767676 is the lightest gray that passes AA on white, at 4.54:1.

What is APCA and is it in WCAG?

APCA (Lc score) is a newer perceptual contrast method being studied for WCAG 3. The WCAG 3 draft has not chosen a contrast algorithm yet, so WCAG 2.x ratios are still the standard. Swatch shows APCA as extra guidance on text size and weight.

How does Swatch suggest a passing color?

It keeps the hue and chroma and moves only the lightness (in OKLCH) to the nearest value that reaches the target, so the fixed color still looks like your original.

How do I make a palette from one color?

Open the Palette tab, enter your brand color and Swatch builds an 11-step scale from 50 to 950 with your color kept as the nearest step, plus contrast notes and CSS, Tailwind or JSON to copy.

Can an AI assistant use Swatch?

Yes. Add the MCP server https://swatch.clawhard.com/mcp (tools swatch_check_contrast, swatch_fix_contrast, swatch_pick_text_color, swatch_make_scale, swatch_convert_color, swatch_check_pairs) or call the JSON API described at /openapi.json.

For AI assistants and developers: llms.txt · API (OpenAPI) · MCP server · sitemap