Adee: Bringing Accessibility Right Inside Design Tools
Samine Hadadi · 2021 · The 23rd International ACM SIGACCESS Conference on Computers and Accessibility (ASSETS 2021) · doi:10.1145/3441852.3476478
Summary
This extended abstract introduces Adee, an accessibility testing plugin that integrates directly into popular design platforms — Adobe XD, Figma, and Sketch — to make accessibility checking a seamless part of the design workflow rather than an afterthought. The paper argues that existing accessibility tools are typically standalone websites, browser extensions, or separate applications that require designers to constantly switch between their design platform and external tools, creating friction that leads many to neglect accessibility entirely or defer it to developers. Adee addresses this by embedding four core accessibility features directly within the designer's workflow: a color contrast checker based on WCAG AA and AAA requirements that helps designers adjust colors to meet standards; a colorblind simulator supporting eight types of color vision deficiency (Protanomaly, Deuteranopia, Tritanomaly, Achromatopsia, and others) with a side-by-side comparison view; a touch target size checker that evaluates element sizes against Apple (44pt), Android (48dp), Nielsen, and WCAG guidelines while accounting for device resolution differences; and an alternative text support tool that lets designers categorize images as informative or decorative and generate alt-text documentation for developer handoff. Adee also produces shareable reports of accessibility checks to facilitate team communication with stakeholders and managers.
Key findings
By May 2021, Adee had attracted 2,100 users on Figma alone, distributed globally with concentrations in the USA, Australia, and South American countries. Usage data showed the color contrast checker was the most-used feature, followed by the colorblind simulator. User feedback was strongly positive, with designers expressing enthusiasm for having accessibility tools integrated into their daily workflow rather than as separate utilities. The touch target size checker was highlighted as particularly educational, with users noting they had not been aware of minimum touch target requirements before using Adee. The tool's approach of providing actionable remediation guidance — not just identifying problems but helping designers fix them by suggesting compliant color adjustments or minimum target sizes — distinguishes it from audit-only tools. The paper acknowledges that Adee covers only a subset of the W3C's accessible design considerations, focusing on checks that are most important at the design stage, most practical for regular use, and feasible to implement as a plugin.
Relevance
Adee represents an important shift in accessibility tooling philosophy: moving accessibility checks upstream into the design phase rather than treating them as downstream testing concerns. For accessibility practitioners, this tool addresses a persistent organizational challenge — designers often lack awareness of accessibility requirements and the tools to act on them within their existing workflow. By embedding checks into Figma, Adobe XD, and Sketch, Adee reduces the friction that causes accessibility to be deprioritized. The touch target size feature is particularly noteworthy as it addresses a commonly overlooked mobile accessibility issue and bridges the gap between platform-specific guidelines (Apple vs. Android) and WCAG standards. The alt-text tool's approach of generating documentation for developer handoff also addresses a common workflow gap where design intent around image descriptions gets lost in translation. While Adee covers only a fraction of accessibility requirements, its integration-first approach offers a model for how design tools should natively support inclusive design practices.
Tags: design tools · color contrast · color blindness · touch target size · alternative text · automated testing · Figma · Adobe XD · Sketch · WCAG
Standards referenced: WCAG 2.1