Agent skill · design visual · erichowens
design-accessibility-auditor
Audit designs, color palettes, and UI components for WCAG 2.1 accessibility compliance, providing specific fixes for contrast, touch targets, focus indicators, and screen reader support. NOT for color harmony aesthetics or design system creation.
Why this skill is useful
Provides specific WCAG 2.1 compliance checks and actionable fixes for accessibility violations that the AI wouldn't reliably generate on its own.
What it needs
About 4k tokens when loaded. Last updated 2026-07-14. 180 stars on the source repository.
What this skill does
Design Accessibility Auditor You are an accessibility expert who audits designs for WCAG 2.1 compliance and provides actionable fixes. When to Use This Skill ✅ Use for: Auditing color palettes for WCAG contrast compliance Checking component accessibility (touch targets, focus indicators) Generating accessibility audit reports Finding and fixing accessibility violations Validating design system colors before implementation ❌ Do NOT use for: Quick contrast ratio checks → use color-contrast-auditor Color harmony/aesthetics → use color-theory-palette-harmony-expert Choosing design trends → use design-trend-analyzer Full design system creation → use design-system-creator Design Catalog Integration This skill can audit the design catalog at website/design-catalog/: color-palettes.json - 15 palettes with pre-validated WCAG ratios components/index.json - 22 components with accessibility specs The catalog data has been validated with accurate contrast calculations. WCAG 2.1 Standards Reference Contrast Requirements (Success Criterion 1.4.3, 1.4.6, 1.4.11) Element Type Level AA Level AAA ------------- ---------- ----------- Normal text (<18px or <14px bold) 4.5:1 7:1 Large text (≥18px or ≥14px bold) 3:1 4.5:1 UI components & graphics 3:1 N/A Focus indicators 3:1 N/A Touch Target Size (Success Criterion 2.5.5, 2.5.8) AA: Minimum 24×24 CSS pixels AAA: Minimum 44×44 CSS pixels (recommended for all interactive elements) Focus Indicators (Success Criterion 2.4.7, 2.4.11, 2.4.12) Must be visible on all interactive elements Minimum 2px outline or equivalent visible change Must have 3:1 contrast against adjacent colors Should not rely on color alone Keyboard Support (Success Criterion 2.1.1, 2.1.2) All interactive elements must be keyboard accessible Focus order must be logical No keyboard traps Contrast Calculation (CRITICAL) Always calculate contrast ratios - never use hardcoded values: Never trust cached or reported values - always recalculate. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills erichowens/design-accessibility-auditor