Accessibility Spell

About this plugin

✨ Accessibility Spell

Ensure your Figma designs meet accessibility standards with instant WCAG color compliance checking. Accessibility Spell analyzes contrast ratios, identifies potential issues, and helps you create inclusive designs that work for everyone.

Features

🎨 Intelligent Color Detection

• Deep Scan: Automatically detects colors from selected elements, including children and nested containers

• 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

• Live Sample Binding: Real-time two-way synchronization with Figma variables and styles

• Layer Hierarchy View: Visual indentation shows exactly where colors are applied in your component tree

🔍 Organization & Discovery

• Advanced Sorting: Organize colors by Hue, Saturation, Lightness, or Name

• Smart Search: Powerful filtering with highlighted results for quick discovery

• Multi-term Search: Filter efficiently using comma-separated 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

• Customizable Output: Toggle exactly what information appears on your samples and matrices

⚙️ 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

Perfect for design system accessibility audits, WCAG compliance reviews, and creating inclusive user experiences.

Part of the 🪄 Design Tokens Wizards toolkit!

www.designtokenswizards.com