Color tools

Contrast checker

Paste a text color and a background in any format. You get the WCAG 2 ratio, AA/AAA for normal and large text, the text rendered on the real background — and when it fails, the nearest fix that moves only lightness, so the color you chose still reads as yours. Need a whole palette? Start in the palette generator.

TextBackground

Contrast ratio

10.47:1

Normal text (≥ 4.5 / 7): AAAAA
Large text (≥ 3 / 4.5): AAAAA

Passes everything

#00455c on #ffffff clears AAA for normal text. Ship it.

Fixes move only lightness — hue and saturation stay put, so the color stays on-brand.

24px · large text

The quick brown fox jumps over the lazy dog — and reads at 10.47:1.

16px · normal text

Body copy is where contrast failures hide. WCAG AA asks for 4.5:1 at this size; AAA asks for 7:1. Headlines and anything 24px+ (or 19px bold) only need 3:1 for AA. Paste any color format on the left — hex, rgb(), hsl(), or a CSS name — and swap the pair to test it inverted.

#00455c#ffffff

mcpConnect your agent to the contrast checker

live endpoint

Point any MCP client at the shared colors endpoint and your agent gets the same engine as this page — generate_palette, check_contrast, analyze_color — read-only, no key. Every palette it proposes comes with a /palettes/new/… link: open it, lock what you like, paste the link back.

endpointhttps://mcp.brandsweets.com/colors/mcp

claude mcp add --transport http brandsweets-colors https://mcp.brandsweets.com/colors/mcp

try this prompt

›check #777777 on white and fix it to pass AA

Want the agent to remember your picks and write them into a living brand? Create a free BrandSweets workspace.