accessibility⁽²⁷⁾

Free browser toolkit for checking design screenshots with contrast analysis, vision simulation, attention heat maps, and alt text support. Includes research-based guidance and a design checklist.

High contrast and neuro-inclusion now mandatory under evolving regulations, reshaping entire design systems. Accessibility moving from checkbox to foundational architecture.

Real-time AI design assistance for accessibility checks, layout optimization, and A/B testing — while maintaining human creative control. The emerging model for AI in design workflows.

Unstyled React components for accessible interfaces and design systems. Includes composable primitives for forms, overlays, navigation, feedback, and interaction without prescribing visual styling.

Figma plugin for scanning layouts and components for accessibility issues, documenting focus order and ARIA intent, and handing annotated guidance to developers before implementation.

Figma’s technical case study on making a canvas-based editor accessible through an internal accessibility tree, Mirror DOM, selection sync, and screen-reader announcements.

Advanced palette builder from Lyft Design using perceptually uniform color scales (HSLuv/LCH). Creates accessible, predictable color systems for design systems — the tool behind thoughtful ramp generation.

Learn-by-doing textbook that connects interface design, usability, accessibility, and HTML/CSS/JavaScript with the social and political context of the web. Includes cases, interviews, exercises, and code.

Practical framework for designing motion that stops safely when timing, state, or performance fails. Covers duration limits, circuit breakers, static fallbacks, monitoring, and user controls.

MCP server that lets AI assistants search curated design system knowledge, including WCAG, ARIA, W3C standards, and major public design systems.

Open-source design system from Dialpad with Vue components, tokens, icons, utilities, UI kits, and accessibility guidance. Version 10 adds composition primitives, theming, MCP tooling, and migration guides.

Stark is the leading accessibility toolkit for designers, with plugins for Figma, Sketch, and Adobe XD. It includes contrast checking, vision simulation, focus order tools, alt-text annotations, and AI-powered accessibility scanning to catch issues during the design process.

GitHub Action that scans sites and repositories for accessibility barriers, files trackable issues, and can assign findings to Copilot for proposed fixes with human review.

Include is a Figma plugin for adding accessibility annotations to your designs — landmarks, headings, tab order, alt text, and ARIA labels. It generates a clear annotation layer that communicates accessibility intent to developers during handoff.

Public state design system with Figma components, accessible style guidance, design tokens, and icon packages. A practical reference for teams building clear, consistent government services.

Long-form framework for matching an AI product's input and output modes to user intent, cognitive load, and environment. Includes a task audit, alignment matrix, and field template.

Public documentation for Nordhealth's production design system, covering 57 web components, 300 icons, tokens, accessibility guidance, Figma tooling, and patterns for dense clinical software.

Public design system for New York State services with web components, CSS utilities, design tokens, accessibility guidance, and a Figma library for agency teams.

Open-source CLI and browser tools for parsing and rendering Figma .fig and .deck files. Converts HTML decks to editable Figma Slides while preserving text, vectors, layouts, fonts, and speaker notes.

Free WCAG 2.2 audit suite with browser extensions, a bookmarklet, CLI, and open-source engine. Findings include exact elements and fixes, while uncertain criteria stay in a manual-review checklist.

Primer Prism, created by GitHub's design team, helps you build cohesive and accessible color systems from a single base color. It generates consistent color scales with built-in WCAG contrast checking — essential for design system color token creation.

Generates accessible color combinations that meet WCAG contrast requirements. Instant random pairings with AA/AAA compliance indicators — useful for quickly finding accessible text/background combos.

Web-based color-system builder that starts from an image or single color, generates Oklch scales, checks contrast, and exports palettes to Figma variables, CSS, SCSS, or PDF.

Advanced palette builder with manual hue/saturation sliders supporting OKHSL/LCH color spaces, image import, contrast checks, and exports up to 24 colors. For designers who want precise control over perceptual uniformity.

Research report comparing usability sessions with cognitive-disabled and general-population participants, including recruitment guidance, study design, findings, and concrete testing recommendations.

Browser-based WCAG audit tool with 46 checks split across content, design, and development. Runs locally on pages behind logins or on localhost, with 28 checks available free and optional report export.

Annual practitioner survey: Web Components gaining over React, AI unstalling stalled adoption, accessibility gap narrowed from 46% to 10%. Real benchmark data, no hype.