How to Check Color Contrast with Claude
Check color accessibility contrast with Claude and ToolRouter. Verify WCAG compliance for text and UI elements before shipping.
Tool
Claude is the right partner for contrast checking when you need to understand why a combination fails and what alternatives would fix it — not just the pass/fail result but a concrete path to a compliant design.
Connect ToolRouter to Claude
1Open connector settings Open Settings
2Add a custom connector with these details
Name
ToolRouterURL
https://api.toolrouter.com/mcp3Let Claude set you up Open Claude
Steps
Once connected (see setup above), use the Color Tools tool:
- Provide the foreground and background hex values and describe the use case — body text, large heading, button label, icon.
- Run color-tools with check_contrast for the color pair.
- Ask Claude to explain the failure if it does not pass, and suggest two or three alternative colors that would achieve AA compliance while staying close to the original.
- Update the design with the compliant alternative.
Example Prompt
Try this with Claude using the Color Tools tool
Use color-tools to check the contrast between our brand blue #2D5BE3 and white #FFFFFF for body text, then between that blue and our background grey #F5F5F5. Does each combination pass WCAG AA? If the grey background fails, suggest the darkest version of our blue that would still pass.
Tips
- Check contrast at all text sizes — WCAG has different requirements for normal text (4.5:1) versus large text (3:1).
- Ask Claude to suggest an alternative that is as close to the original as possible — accessibility fixes do not have to destroy the design.
- Check your most common text-on-background combination first — that is where failures affect the most users.