Design System Contrast Checker

About this plugin

Design System Contrast Checker is a powerful Figma plugin that helps you validate color contrast ratios across your entire variable collection system. Perfect for design systems teams who need to maintain accessibility standards across multiple themes, brands, or modes.

Key Features

🎨 Multi-Mode Support

1. Test contrast ratios across all modes in your variable collections simultaneously
2. Visualize which color combinations pass or fail in light mode, dark mode, and any custom modes
3. Override collection modes to test specific combinations without affecting your design

⚡ Real-Time Validation

1. Automatic checking as you modify variables or color styles
2. Instant feedback with clear pass/fail indicators
3. Support for WCAG AA (4.5:1), WCAG AA (3:1), and AAA (7:1) contrast requirements

🔍 Smart Configuration

1. Define custom contrast checks between any background and foreground variables
2. Autocomplete search for easy variable selection
3. Handles transparent colors with automatic background blending
4. Drag-and-drop reordering of checks

📊 Visual Results

1. Color preview swatches showing exact combinations
2. Expandable groups organized by background color
3. Auto-expand sections with failures for quick identification
4. Filter by mode to focus on specific contexts

💾 Import/Export

1. Export your contrast check configurations as JSON
2. Share settings across projects or with team members
3. Merge or replace configurations when importing

Perfect For

1. Design systems with multiple themes (light/dark mode)
2. Teams maintaining brand variants across products
3. Accessibility-focused designers ensuring WCAG compliance
4. Designers working with complex variable collections

How It Works

1. Select a Variable Collection - Choose which collection to test
2. Configure Checks - Define which background/foreground pairs to validate
3. Review Results - See instant feedback across all modes
4. Fix Issues - Identify and resolve contrast failures before handoff

The plugin intelligently resolves variable aliases, handles transparency, and works seamlessly with your existing Figma color styles and variables.

Built for modern design systems. Works with Figma's native variable collections and color styles.