Verified A11y Auditor

The problem

Manual accessibility testing is time-consuming and prone to human error, often resulting in expensive late-stage fixes. Developers frequently overlook non-obvious WCAG violations like incorrect ARIA usage or failing contrast ratios until a project hits formal QA.

What it does

• Scans React, Vue, Svelte, and HTML/CSS files for WCAG 2.1 AA compliance violations.
• Computes exact color contrast ratios using relative luminance for all text and UI components.
• Categorizes findings by severity (Critical, Serious, Moderate, Minor) with specific line-number references.
• Generates a prioritized "Fix-first" list targeting blockers like keyboard traps and unlabeled form fields.
• Provides direct code snippets for every fix, replacing inaccessible patterns with semantic alternatives.

Frameworks & tools

React, Vue, Svelte, Tailwind CSS, and standard HTML5/CSS3. Works with design tokens and hex/RGB color values.

Why this beats prompting it yourself

Standard LLM prompts often give vague "improve your alt text" advice or hallucinate contrast levels. This skill enforces a rigorous, multi-step checklist and requires mathematical proof for every contrast claim, ensuring your audit is backed by data, not guesses.

Use cases

• Pre-shipment audit for a new component library or design system.
• Remediating legacy web applications to meet legal compliance standards.
• Automated PR reviews for accessibility-sensitive PRs.
• Verifying theme files and design tokens against WCAG contrast thresholds.

Known limitations

Cannot resolve contrast for complex gradients or overlapping transparent layers. Requires manually provided values for CSS variables or design tokens defined outside the audited scope.