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 SupportTest contrast ratios across all modes in your variable collections simultaneouslyVisualize which color combinations pass or fail in light mode, dark mode, and any custom modesOverride collection modes to test specific combinations without affecting your design⚡ Real-Time ValidationAutomatic checking as you modify variables or color stylesInstant feedback with clear pass/fail indicatorsSupport for WCAG AA (4.5:1), WCAG AA (3:1), and AAA (7:1) contrast requirements🔍 Smart ConfigurationDefine custom contrast checks between any background and foreground variablesAutocomplete search for easy variable selectionHandles transparent colors with automatic background blendingDrag-and-drop reordering of checks📊 Visual ResultsColor preview swatches showing exact combinationsExpandable groups organized by background colorAuto-expand sections with failures for quick identificationFilter by mode to focus on specific contexts💾 Import/ExportExport your contrast check configurations as JSONShare settings across projects or with team membersMerge or replace configurations when importingPerfect ForDesign systems with multiple themes (light/dark mode)Teams maintaining brand variants across productsAccessibility-focused designers ensuring WCAG complianceDesigners working with complex variable collectionsHow It WorksSelect a Variable Collection - Choose which collection to testConfigure Checks - Define which background/foreground pairs to validateReview Results - See instant feedback across all modesFix Issues - Identify and resolve contrast failures before handoffThe 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.