accessibility-design-checkerlisted

## Overview Accessible design isn't a separate discipline — it's quality design that works for everyone, including the 1 in 6 people with significant disabilities. This skill provides a practical audit checklist for designs: color contrast, typography, touch targets, focus states, motion, and content — mapped to WCAG 2.2 AA, the standard most organizations target. ## When to use - Auditing mockups or prototypes for accessibility before handoff - Checking color contrast and typography choices - Reviewing interactive states (focus, hover, error) for accessibility - Evaluating motion and animation for vestibular safety - Building accessibility into a design system ## Core concepts - - **WCAG 2.2 AA is the target.** The practical standard: 4.5:1 text contrast (3:1 for large text/UI components), keyboard operability, meaningful focus indicators, no keyboard traps, resizable text to 200%, and reduced-motion support. - - **Contrast is math, not opinion.** Every text/background combination gets checked with a contrast tool. This includes text on images (test the worst-case area), placeholder text (often fails), and disabled states (exempt, but don't abuse the exemption). - - **Don't rely on color alone.** Status, errors, and data distinctions need a second channel: icons, text labels, patterns, or shapes. Approximately 1 in 12 men has color vision deficiency — design for them explicitly. - - **Touch and target sizes.** Minimum 24×24 CSS px (WCAG 2.2 AA), with 44×