What is the design-accessibility-auditor skill?
The design-accessibility-auditor skill is a SKILL.md that makes an AI coding agent audit palettes and UI components for WCAG 2.1. It calculates contrast ratios instead of trusting reported values, checks touch targets, focus indicators and keyboard support, and returns a report with specific fixes.
The design-accessibility-auditor skill sets an AI coding agent up as an accessibility expert for WCAG 2.1. It audits color palettes and UI components, then reports specific fixes for contrast, touch targets, focus indicators and screen reader support.
Contrast ratios are always calculated
The skill gives the relative luminance formula and requires every contrast ratio to be calculated. It states never to trust cached or reported values. A failing pair gets fix options, each with a newly calculated ratio.
Components and the report
Checklists cover buttons, links, form inputs, navigation and cards. The final report lists an overall score out of 100, then critical issues, warnings and passed checks, each with its location, current value, requirement and fix.
Who the design-accessibility-auditor skill is for
Best for
- Checking a color palette against WCAG contrast levels before it ships.
- Validating design system colors before implementation, with the better-colors skill for building the palette first.
- Checking touch targets, focus indicators and ARIA on buttons, links, inputs, navigation and cards.
- Producing a written audit report with prioritized fixes, which the fixing-accessibility skill can then work through in code. For severity-rated WCAG 2.2 findings on a design or build, the accessibility-audit skill is another route.
Not for
- Quick contrast ratio checks, which the skill hands to color-contrast-auditor.
- Color harmony or aesthetics, which it hands to color-theory-palette-harmony-expert.
- Choosing design trends or building a full design system.
How to install Design Accessibility Auditor Skill: WCAG 2.1 Contrast Checks
/plugin marketplace add erichowens/some_claude_skills
/plugin install design-accessibility-auditor@some-claude-skillsAdd the marketplace
In Claude Code run
/plugin marketplace add erichowens/some_claude_skills.Install the skill
Run
/plugin install design-accessibility-auditor@some-claude-skillsto install this skill alone.Or copy the folder
Clone the repository with
git clone https://github.com/erichowens/some_claude_skills.git, then runcp -r some_claude_skills/.claude/skills/* ~/.claude/skills/to copy the skills into your global skills folder.Ask for an audit
Give the agent a palette or a component and ask for an accessibility audit. The skill returns calculated ratios and a report.
Check that it loaded
Give it two hex colors. Expect a calculated contrast ratio with pass or fail for AA and AAA, and fix options with recalculated ratios when a pair fails.
Key features
- Calculated contrastA relative luminance function and a contrast ratio function are included, and the skill says to always recalculate rather than trust cached values.
- AA and AAA thresholdsNormal text needs 4.5:1 for AA and 7:1 for AAA. Large text needs 3:1 and 4.5:1. UI components, graphics and focus indicators need 3:1.
- Per-pair audit tableEach foreground and background pair gets a ratio and a pass or fail for normal text AA and AAA, large text AA and AAA, and UI components.
- Fixes with new ratiosA failing pair gets options to darken the foreground, lighten the background or use an alternative pair, each with a recalculated ratio.
- Touch targetsAA asks for at least 24 by 24 CSS pixels and AAA for 44 by 44, which the skill recommends for all interactive elements. Its example grows a 32px icon button to 44px.
- Focus indicatorsFocus must be visible on every interactive element, with an outline of at least 2px or an equivalent change, 3:1 contrast against neighbors and no reliance on color alone.
- Component checklistsButtons, links, form inputs, navigation and cards each get a checklist, with attributes such as aria-invalid, aria-describedby, aria-required and aria-current set to page.
- Structured audit reportThe report opens with a summary of score out of 100, critical issues, warnings and passes, then lists each issue with location, current value, requirement and fix.
- Testing and escalation notesThe skill names axe DevTools, Lighthouse and Pa11y CI, plus VoiceOver, NVDA and 200% zoom. It recommends manual review for carousels, data tables, custom controls and embedded content.
Frequently asked questions
What is the design-accessibility-auditor skill?
It is a SKILL.md that makes an AI coding agent audit designs, color palettes and UI components for WCAG 2.1 compliance. It calculates contrast ratios, checks touch targets, focus indicators and keyboard support, runs checklists on common components and produces a report with specific fixes for each failure it finds.
How do I install design-accessibility-auditor?
In Claude Code run /plugin marketplace add erichowens/some_claude_skills, then /plugin install design-accessibility-auditor@some-claude-skills. You can also clone the repository and run cp -r some_claude_skills/.claude/skills/* ~/.claude/skills/ to copy every skill into your global skills folder. Then give the agent two hex colors and ask for an accessibility audit; expect calculated ratios with pass or fail for AA and AAA.
What contrast ratios does design-accessibility-auditor check?
Normal text needs 4.5:1 for level AA and 7:1 for AAA. Large text, meaning 18px or more or 14px bold or more, needs 3:1 for AA and 4.5:1 for AAA. UI components, graphics and focus indicators need 3:1. The skill calculates each ratio with the luminance formula.
What does design-accessibility-auditor check besides contrast?
It checks touch target size, with 24 by 24 CSS pixels for AA and 44 by 44 for AAA, visible focus indicators of at least 2px, and keyboard support with logical focus order and no traps. Component checklists also cover roles, labels, error states, skip links and heading hierarchy.
What does the design-accessibility-auditor report look like?
The report starts with a summary: an overall score out of 100, the number of critical issues, warnings and passes. Critical issues come next, then warnings, then passed checks. Each issue lists its location, the current value with its calculated ratio, the requirement and a specific fix.
When should I not use design-accessibility-auditor?
Skip it for quick contrast ratio checks, color harmony or aesthetics, choosing design trends, and creating a full design system. The skill names color-contrast-auditor, color-theory-palette-harmony-expert, design-trend-analyzer and design-system-creator for those jobs, and it recommends manual review for complex widgets such as carousels and data tables.
Is the design-accessibility-auditor skill free to use?
It is MIT licensed, and the license covers the whole repository, including this skill folder. The terms are the same whether you install through the plugin marketplace or copy the folder into ~/.claude/skills/ by hand. The repository README lists the license as MIT License.