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'.
Best use case
accessibility-contrast-audit is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
[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'.
Teams using accessibility-contrast-audit should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/accessibility-contrast-audit/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How accessibility-contrast-audit Compares
| Feature / Agent | accessibility-contrast-audit | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
[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'.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Accessibility & Contrast Audit Quantitative accessibility checks for contrast, font size, hit areas, and semantic structure. ## Quick Start ```bash 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 |
Related Skills
accessibility-testing
Guide for conducting comprehensive accessibility audits of code to identify WCAG compliance issues and barriers to inclusive design. This skill should be used when reviewing accessibility, ARIA implementation, keyboard navigation, or screen reader compatibility.
accessibility
Quality assurance for web accessibility and usability, particularly for users with disabilities. Use when involved in any web project.
accessibility-ux-audit
Audit and enhance accessibility and UX across all pages and components.
accessibility-rules
Concise accessibility checklist and practices for components in the repository. Use when implementing UI to ensure keyboard, screen reader, and focus semantics.
accessibility-planning
Plan accessibility compliance - WCAG 2.2, Section 508, EN 301 549, inclusive design principles, audit planning, and remediation strategies.
accessibility-design
WCAG 2.1 AA compliance patterns, screen reader compatibility, keyboard navigation, and ARIA best practices. Use when implementing accessible interfaces, reviewing UI components, or auditing accessibility compliance. Covers semantic HTML, focus management, color contrast, and assistive technology testing.
accessibility-design-checklist
Эксперт по accessibility дизайну. Используй для WCAG, a11y чеклистов и inclusive design.
accessibility-design-checker
Ensures designs meet accessibility requirements including WCAG compliance, color contrast, keyboard navigation, screen reader support, and focus management. Reviews designs for accessibility issues and provides recommendations.
accessibility-compliance
Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns, and assistive technology support. Use when auditing accessibility, implementing ARIA patterns, building for screen readers, or ensuring inclusive user experiences.
accessibility-by-default
Treats accessibility as a baseline requirement, not a feature. WCAG 2.1/2.2 AA principles embedded into every decision.
accessibility-basic-check
Run a basic accessibility checklist for UI changes. Use when a junior developer needs quick a11y guidance.
accessibility-advocate
Use when designing inclusive animations, addressing vestibular disorders and motion sensitivity, or ensuring animation accessibility compliance.