ContrastMate - WCAG Contrast Checker

About this plugin

ContrastMate is a professional WCAG 2.1 contrast checker that helps designers create accessible interfaces. Scan your text layers and instantly identify which ones pass or fail accessibility guidelines.WHAT IT DOESContrastMate analyzes your Figma text layers against WCAG 2.1 contrast requirements, giving you instant feedback on compliance. See at a glance which layers need adjustment to meet AA or AAA accessibility standards.KEY FEATURESReal-Time Scanning• Scan selected layers or entire pages in seconds• Progress tracking for large documents (shows "Scanning... 324 scanned")• Timeout protection prevents hangs on massive files• Results update instantly as you workWCAG Compliance Detection• AA Level: 4.5:1 for normal text, 3:1 for large text• AAA Level: 7:1 for normal text, 4.5:1 for large text• Precise contrast ratios displayed (e.g., "4.52:1")• Automatic large text threshold calculation• Color-coded badges: Green (AAA), Blue (AA), Red (FAIL)Smart Background Detection• Automatically finds text background colors• Checks parent frames and sibling layers• Handles semi-transparent colors with alpha compositing• Fallback to white background with warningsOne-Click Navigation• Click any layer to focus it in your Figma canvas• Automatic page switching for cross-page layers• Visual highlight shows selected layer• Keyboard shortcuts for power usersFull Keyboard Accessibility• Arrow keys navigate filter tabs• Enter/Space activates buttons and cards• Tab through all controls logically• ARIA labels for screen readers• The accessibility tool is itself WCAG 2.1 AA compliant!Advanced Features• Filter by Errors, Warnings, or Passed layers• Search by layer name, text content, font, or parent• Missing font detection with warnings• Re-scan button for quick updates• Detailed layer information (font, size, parent)WHAT YOU SEEStatistics Dashboard• Total errors, warnings, and passed layers at a glance• Visual summary with color-coded counts• Scan duration and timestampLayer Cards• Layer name and parent context• Text preview snippet• Text color and background color swatches• Contrast ratio and WCAG level badge• Font family, size, and weight• Missing font warningsPERFECT FOR• UX/UI designers ensuring accessibility compliance• Design systems teams maintaining standards• Agencies with accessibility requirements• Developers checking design handoffs• Anyone committed to inclusive, accessible design• Government and enterprise projects requiring WCAG complianceTECHNICAL DETAILS• Built with TypeScript for reliability• 41 comprehensive unit tests• Zero security vulnerabilities• Follows W3C official contrast ratio formula• No network access - fully offline and privacy-focused• Fast performance - handles hundreds of layers efficiently• Smart recursive scanning of nested componentsWCAG 2.1 STANDARDSContrastMate implements the official W3C contrast ratio algorithm:1. Converts colors to relative luminance2. Calculates contrast ratio: (L1 + 0.05) / (L2 + 0.05)3. Compares against WCAG thresholds4. Detects large text automatically (18pt+ or 14pt+ bold)HOW TO USE1. Select text layers in Figma (or leave empty to scan entire page)2. Run ContrastMate from the Plugins menu3. Review results - errors appear with red indicators at top4. Click any layer to navigate directly to it5. Use filters to focus on specific issues6. Make adjustments in your design7. Re-scan to verify your changesPRO TIPS• Use keyboard shortcuts for faster workflow• Filter by "Errors" to prioritize critical issues• Search for specific fonts or layer names• Click the info button to learn more about WCAG standards• Re-scan frequently as you make changesOPEN SOURCEContrastMate is open source software under the MIT License. View the code, report issues, or contribute on GitHub.Created by Susith Deshan AlwisGitHub: https://github.com/SusithDEmail: [email protected]: ContrastMate calculates contrast against detected backgrounds. If no background is found, it assumes white background and displays a warning.