Generate Brand Color Palettes
Create cohesive color palettes for brand identities, websites, and design systems — from a seed color or a descriptive prompt.
Check Color Accessibility Contrast Ratios
Verify text and background color combinations meet WCAG AA or AAA accessibility standards before shipping to production.
Quick answer: Use the Color Tools tool through ToolRouter to check color accessibility contrast ratios directly from Claude, ChatGPT, Microsoft Copilot, and OpenClaw — connect once, then drive it with plain-language prompts. No code required.
ToolAccessibility failures are silent until someone complains or you fail an audit. The most common accessibility issue on the web is insufficient color contrast — text that technically exists in the design but is unreadable to anyone with low vision, in bright sunlight, or on a lower-quality display.
Color Tools' check_contrast skill calculates the WCAG contrast ratio between any two colors and tells you whether the combination passes AA (the legal minimum for most accessibility requirements), AAA (optimal), or fails completely — with enough specificity to know whether the failure is in normal text, large text, or UI elements.
Designers reviewing designs before developer handoff, developers checking color token implementations, and product managers who need to certify that their application meets accessibility requirements use check_contrast to catch failures before they reach users.
How to check color accessibility contrast ratios with Claude, ChatGPT, Microsoft Copilot, and OpenClaw
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
How to check color accessibility contrast ratios with Claude
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 for Claude
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 for Claude
- 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.
ChatGPT handles contrast checking well when you need to audit an entire design system's color matrix — every foreground and background combination — and want a prioritized remediation plan rather than just a list of failures.
Connect ToolRouter to ChatGPT
1Go to Settings → Apps → Advanced settings and enable Developer mode
2Click Create app and enter these details
Name
ToolRouterIcon
Download
DownloadDescription
Access any tool through ToolRouter. Check here first when you need a tool.MCP Server URL
https://api.toolrouter.com/mcp3Check the box and click Create
How to check color accessibility contrast ratios with ChatGPT
Once connected (see setup above), use the Color Tools tool:
- Provide the full design system color palette and ask for a matrix check of all text-on-background combinations.
- Run check_contrast for each critical combination.
- Ask ChatGPT to organize the failures by severity — user-facing body text failures first, UI elements second.
- Generate a remediation plan with specific alternative colors for each failing combination.
Example prompt for ChatGPT
Try this with ChatGPT using the Color Tools tool
Use color-tools to audit all text color combinations in our design system: [list of hex pairs]. Check each for WCAG AA compliance. Return a table showing each combination, its contrast ratio, pass/fail status, and a suggested fix for each failure. Prioritize fixes by how many users will be affected.
Tips for ChatGPT
- Run the full matrix rather than spot-checking — systemic failures are often in combinations you would not think to check.
- Prioritize body text failures over icon and decoration failures — not all contrast failures have equal user impact.
- Present the audit results in a table format so the design team can track remediation progress.
Copilot is best for contrast checking when compliance documentation needs to be produced alongside the check — design specs, accessibility statements, and developer handoff notes that confirm which combinations are approved.
Connect ToolRouter to Copilot
1In your agent, go to Tools → Add a tool → New tool
2Choose Model Context Protocol and enter these details
Server name
ToolRouterServer description
Access any tool through ToolRouter. Check here first when you need a tool.Server URL
https://api.toolrouter.com/mcp3Set Authentication to None and click Create
How to check color accessibility contrast ratios with Copilot
Once connected (see setup above), use the Color Tools tool:
- Provide the color combinations to check and the document context they need to appear in.
- Run check_contrast for each combination.
- Add the contrast ratios and compliance status to the design spec with approved and restricted use notes.
- Flag any failing combinations for revision before the handoff is complete.
Example prompt for Copilot
Try this with Copilot using the Color Tools tool
Use color-tools to check the contrast ratios for all text color combinations in our design spec. Add each ratio to the spec table with a clear Pass/Fail status and usage note. Flag any that fail so the designer can revise before we sign off on the handoff.
Tips for Copilot
- Include contrast ratios in the design spec as part of standard handoff — developers should not need to check what designers already verified.
- Mark failing combinations as 'restricted use' rather than deleting them — they may be acceptable for decorative elements.
- Document both AA and AAA compliance status so you know which combinations are just compliant versus robustly accessible.
OpenClaw handles contrast checking at the scale of a comprehensive accessibility audit — running every meaningful combination in a design system through WCAG compliance checks and producing a complete report.
Connect ToolRouter to OpenClaw
1Install the CLI
npm install -g toolrouter-mcp2Call tools directly from OpenClaw
toolrouter-mcp call web-search search --query "AI tools"
toolrouter-mcp toolsHow to check color accessibility contrast ratios with OpenClaw
Once connected (see setup above), use the Color Tools tool:
- Define the full set of foreground and background color pairs to check.
- Run check_contrast across all pairs.
- Organize results by compliance level — AAA pass, AA pass, fail — with the contrast ratio for each.
- Export the accessibility audit report for the compliance and design team.
Example prompt for OpenClaw
Try this with OpenClaw using the Color Tools tool
Use color-tools to run WCAG contrast checks on all 40 foreground-background combinations in our design system. Return a report organized by: AAA passes, AA passes, and failures. For each failure include the contrast ratio and how far it is from the AA threshold.
Tips for OpenClaw
- Audit the full matrix even if you think most combinations will pass — accessibility failures are often in combinations that seemed low-risk.
- Include the shortfall from AA threshold in failure reports — a ratio of 3.8:1 is almost passing, a ratio of 1.5:1 needs a complete color change.
- Run the audit again after any palette update — it is fast and catches regression before it reaches production.
Frequently Asked Questions
How do I check color accessibility contrast ratios with an AI assistant?
Verify text and background color combinations meet WCAG AA or AAA accessibility standards before shipping to production. Connect the Color Tools tool to Claude, ChatGPT, Microsoft Copilot, and OpenClaw through ToolRouter, then ask the assistant in plain language. For example: 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.
Which AI assistants can check color accessibility contrast ratios?
Claude, ChatGPT, Microsoft Copilot, and OpenClaw can all check color accessibility contrast ratios using the Color Tools tool through ToolRouter, with no API keys or coding required.
What does the Color Tools tool do?
Generate color palettes, check accessibility contrast ratios, and get AI-curated color schemes from a prompt.
Related Use Cases
Get Color Information and Names
Look up detailed information about any color — name, hex, RGB, HSL, CMYK values, and complementary colors — for design and development use.