Accessibility Spell

About this plugin

✨ ACCESSIBILITY SPELL

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

FEATURES

🎨 Color Detection & Analysis

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

• 🧪 Smart Extraction: Identifies color variables, styles, and raw fills/strokes.

• 🌈 Gradient Support: Full support for linear, radial, and conic gradients.

• 🔄 Live Updates: Color list refreshes automatically when you change your selection.

• 🔗 Live Swatch Binding: Real-time two-way synchronization with Figma variables and styles.

• 🗂️ Layer Hierarchy: Visual indentation shows exactly where colors are applied in the tree.

♿ WCAG Accessibility Compliance

• ✅ Instant Validation: Check if colors meet WCAG 2.2 AA and AAA standards.

• 📏 Text Size Awareness: Accurate ratings for both normal and large text contrast.

• 🔄 Interactive Checker: Compare any two colors with live WCAG ratios and instant hover tooltips.

• 📊 Detailed Analytics: View contrast ratios against white and black backgrounds.

• 📖 Integrated Guide: Built-in 8-bit reference guide to master WCAG standards and contrast requirements.

📊 Documentation & Simulation

• 🖼️ Visual Samples: Create professionally styled color cards with accessibility information.

• 📄 Responsive Contrast Matrix: Generate comprehensive contrast grids that resize intelligently with their container.

• 👁️ Color Blindness Simulation: Preview how colors appear with Protanopia, Deuteranopia, Tritanopia and Achromatopsia.

• 🔍 Multi-term Search: Powerful filtering using comma-separated queries (e.g., "primary, background").

• 🗛 Personalized Output: Toggle exactly what information appears on your color samples and matrix.

⚙️ Customization & UX

• 🧭 Guided Onboarding: 12-slide interactive tour to master the plugin's magical workflow in seconds.

• ⌨️ Keyboard Power: Full keyboard navigation support. Traverse grids with arrow keys, swap colors with X, and toggle slots with 1/2.

• ⚡ Global Shortcuts: Speed up your production with Cmd/Ctrl + Enter to generate samples and Cmd/Ctrl + Shift + Enter for matrix exports.

• ♿ Pro Accessibility: Smart focus management, focus traps for modals, and comprehensive ARIA support for a seamless screen reader experience.

• 🔧 Flexible Settings: Refined 8-bit aesthetic with a dedicated shortcuts reference guide and organized customization tabs.

• 🎵 Magical Audio Cues: Magical sound feedback for actions and events in the plugin.

• 🔠 Smart Formatting: Instantly transform color names into dot.notation, kebab-case, snake_case, Title Case, and more.

• 🌍 Full Localization: Complete English and Spanish support across the entire UI and generated documentation.

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

Part of the 🪄 Design Tokens Wizards toolkit!

www.designtokenswizards.com