Accessibility Spell

About this plugin

Ensure your Figma designs meet accessibility standards with instant WCAG color compliance checking. Accessibility Spell analyzes contrast ratios, identifies potential issues, helps you craft documentation and helps you create inclusive designs that work for everyone, all in one magical plugin experience.Features🎨 Variables & Styles Integration• Variables Tab: Dedicated interface to explore and manage all color variables and local styles in your Figma file• Hierarchical Tree View: Variables organized in a structured folder hierarchy with expand/collapse and folder selection• Fast and Smart Color Export: Export color variables and styles with full metadata and documentation• Live Variable Binding: Real-time two-way synchronization between samples and Figma variables/styles🔍 Intelligent Color Detection• Deep Scan: Automatically detects colors from selected elements, including children and nested containers within components/elements• Smart Extraction: Identifies color variables, styles, and raw fills/strokes throughout your design• Gradient Support: Full compatibility with linear, radial, and conic gradients• Live Updates: Color list refreshes automatically as you modify your selection• Layer Hierarchy View: Visual indentation shows exactly where colors are applied in your component tree🗂️ Organization & Discovery• Color Breakdown Tab: Dedicated analysis tab showing all colors extracted from your selection with full detail• Advanced Sorting: Organize colors by Hue, Saturation, Lightness, or Name• Smart Search: Powerful filtering with highlighted results for quick discovery, including multi-term queries (e.g., "primary, background")• Smart Text Formatting: Instantly transform color names into dot.notation, kebab-case, snake_case, Title Case, and more♿ WCAG Compliance Tools• Instant Validation: Check if color combinations meet WCAG 2.2 Level AA and AAA standards• Text-Size Aware: Accurate contrast ratings for both normal and large text• Interactive Checker: Compare any two colors with live contrast ratios and instant hover tooltips• Detailed Analytics: View contrast ratios against white and black backgrounds at a glance• Color Blindness Simulation: Preview designs through the lens of Protanopia, Deuteranopia, Tritanopia, and Achromatopsia• Integrated Guide: Built-in reference to help you master WCAG standards and contrast requirements📊 Professional Documentation• Visual Color Samples: Generate professionally styled samples with embedded accessibility information• Responsive Contrast Matrix: Create comprehensive contrast grids that adapt intelligently to their container• Documentation Bar: Quick access to documentation features and export options via dedicated bottom bar• Color Format Options: Choose between HEX, RGB, RGBA, HSL, and OKLCH formats for swatches and exports• Customizable Output: Toggle exactly what information appears on your samples and matrices, including layout style (vertical card or horizontal row)⚙️ Workflow & Accessibility• Guided Onboarding: Interactive 12-slide tour to master the plugin's workflow in minutes• Keyboard Navigation: Full keyboard support—traverse grids with arrow keys, swap colors with X, toggle slots with 1/2• Global Shortcuts: Boost productivity with Cmd/Ctrl + Enter to generate samples and Cmd/Ctrl + Shift + Enter for matrices• Screen Reader Optimized: Smart focus management, modal focus traps, and comprehensive ARIA support• Flexible Settings: Refined interface with organized customization tabs and a built-in shortcuts reference• Audio Feedback: Satisfying sound cues for actions and events throughout the plugin• Full Localization: Complete English and Spanish support across the entire interface and documentation🔒 Privacy & Metrics• Opt-in Telemetry: Anonymous usage metrics are enabled by default and can be turned off at any time from Settings → Interface or during the onboarding tour• No Personal Data: No user identity, Figma account details, or canvas content is ever collected• What Is Tracked: Aggregate, non-identifying signals — which features are used, how long sessions last, language preference (EN/ES), and interaction counts. All events carry only the plugin version, language, and optional numeric/enum properties (e.g. a contrast ratio, a sort option)• Purpose: Metrics are used exclusively to understand which features are valuable and to prioritize improvements. They are never shared or soldPerfect for design system accessibility audits, WCAG compliance reviews, and creating inclusive user experiences.Part of the 🪄 Design Tokens Wizards toolkit!www.designtokenswizards.com