How to Check Color Contrast with ChatGPT
Check color accessibility contrast with ChatGPT and ToolRouter. Audit a full design system's color palette for WCAG compliance.
Tool
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
Steps
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
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
- 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.