simulate_colorblind
Simulate webpage appearance for colorblind users to test accessibility. Input a URL and color blindness type to generate visual simulations.
Instructions
Simulate how a webpage looks for colorblind users
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| url | Yes | URL to capture | |
| type | Yes | Type of color blindness to simulate | |
| outputPath | No | Optional path to save the screenshot | |
| userAgent | No | Optional user agent string to use for the request |
Implementation Reference
- src/index.ts:174-385 (handler)Main handler function for simulate_colorblind tool. Launches headless browser with Puppeteer, loads the webpage, injects JavaScript to simulate colorblindness by applying color transformation matrices to all elements' text and background colors, takes a full-page screenshot, and saves it.
private async handleColorBlindSimulation(request: any) { if (!request.params.arguments || typeof request.params.arguments.url !== 'string' || typeof request.params.arguments.type !== 'string') { throw new McpError( ErrorCode.InvalidParams, 'URL and type parameters are required' ); } const args: SimulateColorblindArgs = { url: request.params.arguments.url, type: request.params.arguments.type as 'protanopia' | 'deuteranopia' | 'tritanopia', outputPath: request.params.arguments.outputPath, userAgent: request.params.arguments.userAgent }; let browser; try { console.error('[Debug] Launching browser...'); browser = await puppeteer.launch({ headless: true, args: [ '--no-sandbox', '--disable-setuid-sandbox', '--disable-dev-shm-usage', '--disable-accelerated-2d-canvas', '--disable-gpu', '--window-size=1920,1080' ] }); console.error('[Debug] Creating new page...'); const page = await browser.newPage(); await page.setViewport({ width: 1920, height: 1080 }); await page.setUserAgent(args.userAgent || 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36'); // Enable request interception for debugging await page.setRequestInterception(true); page.on('request', request => { console.error(`[Debug] Request: ${request.url()}`); request.continue(); }); page.on('response', response => { console.error(`[Debug] Response: ${response.url()} - ${response.status()}`); }); page.on('console', msg => { console.error(`[Page Console] ${msg.text()}`); }); console.error('[Debug] Navigating to URL...'); const urlToUse = args.url.replace(/^(https?:\/\/)?(www\.)?/, 'https://www.'); console.error(`[Debug] Modified URL: ${urlToUse}`); const response = await page.goto(urlToUse, { waitUntil: 'networkidle2', timeout: 120000 // Increased timeout to 2 minutes }); console.error(`[Debug] Page loaded with status: ${response?.status()}`); // Wait for the page to be fully loaded console.error('[Debug] Waiting for page load...'); await page.waitForSelector('body', { timeout: 120000 }); // Give extra time for dynamic content console.error('[Debug] Waiting for dynamic content...'); await new Promise(resolve => setTimeout(resolve, 5000)); // Inject the colorblind simulation code console.error('[Debug] Injecting colorblind simulation...'); await page.evaluate((type) => { // Implementation of colorblind simulation function multiply(a: number[], b: number[]): number[] { return [ a[0] * b[0] + a[1] * b[3] + a[2] * b[6], a[0] * b[1] + a[1] * b[4] + a[2] * b[7], a[0] * b[2] + a[1] * b[5] + a[2] * b[8], ]; } const colorBlindnessMatrices = { protanopia: [ 0.567, 0.433, 0, 0.558, 0.442, 0, 0, 0.242, 0.758 ], deuteranopia: [ 0.625, 0.375, 0, 0.7, 0.3, 0, 0, 0.3, 0.7 ], tritanopia: [ 0.95, 0.05, 0, 0, 0.433, 0.567, 0, 0.475, 0.525 ] }; window.simulate = function(rgb: RGB, type: string): RGB { const matrix = colorBlindnessMatrices[type as keyof typeof colorBlindnessMatrices]; const result = multiply([rgb.r / 255, rgb.g / 255, rgb.b / 255], matrix); return { r: Math.round(result[0] * 255), g: Math.round(result[1] * 255), b: Math.round(result[2] * 255) }; }; function parseColor(color: string): RGB { color = color.toLowerCase().replace(/\s/g, ''); if (color.startsWith('rgba(') || color.startsWith('rgb(')) { const values = color .replace('rgba(', '') .replace('rgb(', '') .replace(')', '') .split(',') .map(Number); return { r: values[0], g: values[1], b: values[2] }; } if (color.startsWith('#')) { const hex = color.replace('#', ''); const r = parseInt(hex.substr(0, 2), 16); const g = parseInt(hex.substr(2, 2), 16); const b = parseInt(hex.substr(4, 2), 16); return { r, g, b }; } return { r: 0, g: 0, b: 0 }; } function rgbToString(rgb: RGB): string { return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`; } // Get all elements with background color or color const elements = document.querySelectorAll('*'); elements.forEach(el => { const htmlEl = el as HTMLElement; const styles = window.getComputedStyle(htmlEl); const color = styles.color; const backgroundColor = styles.backgroundColor; if (color !== 'rgba(0, 0, 0, 0)') { const rgbColor = parseColor(color); const simulatedColor = window.simulate(rgbColor, type); htmlEl.style.color = rgbToString(simulatedColor); } if (backgroundColor !== 'rgba(0, 0, 0, 0)') { const rgbBgColor = parseColor(backgroundColor); const simulatedBgColor = window.simulate(rgbBgColor, type); htmlEl.style.backgroundColor = rgbToString(simulatedBgColor); } }); }, args.type); // Wait for the filter to be applied console.error('[Debug] Waiting for filter to apply...'); await new Promise(resolve => setTimeout(resolve, 2000)); // Get output directory from environment variable or use default const outputDir = process.env.MCP_OUTPUT_DIR || './output'; console.error('[Debug] Taking screenshot...'); const outputPath = join(outputDir, args.outputPath || `colorblind_${args.type}.png`); await page.screenshot({ path: outputPath, fullPage: true }); console.error('[Debug] Screenshot saved successfully'); await browser.close(); console.error('[Debug] Browser closed'); return { content: [ { type: 'text', text: JSON.stringify({ url: args.url, type: args.type, outputPath: outputPath, timestamp: new Date().toISOString(), message: `Screenshot saved with ${args.type} simulation` }, null, 2), }, ], }; } catch (error) { console.error('[Debug] Error occurred:', error); if (browser) { try { await browser.close(); console.error('[Debug] Browser closed after error'); } catch (closeError) { console.error('[Debug] Error closing browser:', closeError); } } return { content: [ { type: 'text', text: `Error simulating color blindness: ${error instanceof Error ? error.message : String(error)}`, }, ], isError: true, }; } } - src/index.ts:73-78 (schema)TypeScript interface defining the input parameters for the simulate_colorblind tool.
interface SimulateColorblindArgs { url: string; type: 'protanopia' | 'deuteranopia' | 'tritanopia'; outputPath?: string; userAgent?: string; } - src/index.ts:130-156 (registration)Tool registration in the listTools response, defining name, description, and JSON schema matching the TypeScript interface.
{ name: 'simulate_colorblind', description: 'Simulate how a webpage looks for colorblind users', inputSchema: { type: 'object', properties: { url: { type: 'string', description: 'URL to capture', }, type: { type: 'string', enum: ['protanopia', 'deuteranopia', 'tritanopia'], description: 'Type of color blindness to simulate', }, outputPath: { type: 'string', description: 'Optional path to save the screenshot', }, userAgent: { type: 'string', description: 'Optional user agent string to use for the request', }, }, required: ['url', 'type'], }, }, - src/index.ts:160-172 (registration)Dispatcher in CallToolRequest handler that routes to the specific handler for simulate_colorblind.
this.server.setRequestHandler(CallToolRequestSchema, async (request) => { if (request.params.name === 'check_accessibility') { return this.handleAccessibilityCheck(request); } else if (request.params.name === 'simulate_colorblind') { return this.handleColorBlindSimulation(request); } else { throw new McpError( ErrorCode.MethodNotFound, `Unknown tool: ${request.params.name}` ); } }); } - src/index.ts:30-60 (helper)Helper function to parse CSS color strings to RGB objects, used in the simulation logic (also redefined in injected JS).
function parseColor(color: string): RGB { // Remove all spaces and convert to lowercase color = color.toLowerCase().replace(/\s/g, ''); // Handle rgba/rgb format if (color.startsWith('rgba(') || color.startsWith('rgb(')) { const values = color .replace('rgba(', '') .replace('rgb(', '') .replace(')', '') .split(',') .map(Number); return { r: values[0], g: values[1], b: values[2] }; } // Handle hex format if (color.startsWith('#')) { const hex = color.replace('#', ''); const r = parseInt(hex.substr(0, 2), 16); const g = parseInt(hex.substr(2, 2), 16); const b = parseInt(hex.substr(4, 2), 16); return { r, g, b }; } // Default to black if color format is not recognized return { r: 0, g: 0, b: 0 }; }