How to Check Color Contrast with Copilot
Check color accessibility contrast with Copilot and ToolRouter. Document WCAG compliance in design specs and handoff documents.
Tool
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
Steps
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
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
- 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.