accessibility-contrast-audit
[Design System] Quantitative accessibility audit for UI - contrast ratios, font sizes, tap targets, heading hierarchy. Use when (1) checking WCAG color contrast compliance, (2) auditing text sizes for readability, (3) validating touch/click target sizes, (4) reviewing heading structure and landmarks, (5) user asks to 'check accessibility', 'audit contrast', 'WCAG compliance', or 'a11y check'.
When & Why to Use This Skill
This Claude skill automates quantitative accessibility audits for user interfaces, ensuring strict adherence to WCAG standards. It provides a systematic way to evaluate critical design elements—including color contrast ratios, font sizes, touch target dimensions, and semantic heading hierarchies—to enhance digital inclusivity and streamline the quality assurance process for developers and designers.
Use Cases
- WCAG Compliance Auditing: Automatically verify that text and UI components meet Level AA or AAA contrast requirements to ensure readability and legal compliance.
- Mobile Usability Testing: Validate that touch and click targets meet the minimum 44×44px requirement to prevent navigation errors on mobile and touch-screen devices.
- Semantic Structure Review: Audit heading levels and landmarks to ensure a logical document flow, which is essential for screen reader compatibility and SEO.
- Design System Validation: Scan design tokens and source code to identify 'text-too-small' or 'low-contrast' errors early in the development lifecycle.
- Automated Accessibility Reporting: Generate detailed reports on UI accessibility health, identifying specific severity levels for issues like missing alt text or skipped heading levels.
| name | accessibility-contrast-audit |
|---|---|
| description | "[Design System] Quantitative accessibility audit for UI - contrast ratios, font sizes, tap targets, heading hierarchy. Use when (1) checking WCAG color contrast compliance, (2) auditing text sizes for readability, (3) validating touch/click target sizes, (4) reviewing heading structure and landmarks, (5) user asks to 'check accessibility', 'audit contrast', 'WCAG compliance', or 'a11y check'." |
Accessibility & Contrast Audit
Quantitative accessibility checks for contrast, font size, hit areas, and semantic structure.
Quick Start
python3 scripts/audit_accessibility.py --source src/ --tokens tokens.json
WCAG Standards Reference
| Criterion | Level AA | Level AAA |
|---|---|---|
| Normal text contrast | 4.5:1 | 7:1 |
| Large text contrast (18px+ or 14px bold) | 3:1 | 4.5:1 |
| UI components/graphics | 3:1 | 3:1 |
| Minimum touch target | 44×44px | 44×44px |
| Minimum font size (body) | 16px | 16px |
Problem Types
| Type | Severity | Description |
|---|---|---|
low-contrast |
error | Text/background contrast below WCAG threshold |
text-too-small |
warning | Font size below recommended minimum |
hit-area-too-small |
warning | Touch/click target below 44×44px |
heading-skip |
warning | Heading levels skipped (h1→h3) |
missing-alt |
error | Image missing alt text |