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

2.35:1

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

Fix it — nearest passing nudge

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 2.35: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.

#cda170#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 — direct_palette, edit_direction, check_palette, check_contrast — read-only, no key. Every direction it proposes comes with a /colors/d/… link: open it, lock what you like, paste the link back, and the agent edits rather than re-rolls.

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.