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.

1. WHAT IT DOES

ContrastMate 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.

1. KEY FEATURES

Real-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 work

WCAG 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 warnings

One-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 users

Full 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)

1. WHAT YOU SEE

Statistics Dashboard

• Total errors, warnings, and passed layers at a glance

• Visual summary with color-coded counts

• Scan duration and timestamp

Layer 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 warnings

1. PERFECT 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 compliance

1. TECHNICAL 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 components

1. WCAG 2.1 STANDARDS

ContrastMate implements the official W3C contrast ratio algorithm:

1. Converts colors to relative luminance

2. Calculates contrast ratio: (L1 + 0.05) / (L2 + 0.05)

3. Compares against WCAG thresholds

4. Detects large text automatically (18pt+ or 14pt+ bold)

1. HOW TO USE

1. Select text layers in Figma (or leave empty to scan entire page)

2. Run ContrastMate from the Plugins menu

3. Review results - errors appear with red indicators at top

4. Click any layer to navigate directly to it

5. Use filters to focus on specific issues

6. Make adjustments in your design

7. Re-scan to verify your changes

1. PRO 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 changes

1. OPEN SOURCE

ContrastMate is open source software under the MIT License. View the code, report issues, or contribute on GitHub.

Created by Susith Deshan Alwis

GitHub: https://github.com/SusithD

Email: iamsusithalwis@gmail.com

---

Note: ContrastMate calculates contrast against detected backgrounds. If no background is found, it assumes white background and displays a warning.