Agent skill
elite-frontend-ux-contrast-wcag-21-aa
Sub-skill of elite-frontend-ux: Contrast (WCAG 2.1 AA) (+4).
Install this agent skill to your Project
npx add-skill https://github.com/vamseeachanta/workspace-hub/tree/main/.claude/skills/_archive/development/elite-frontend-ux/contrast-wcag-21-aa
SKILL.md
Contrast (WCAG 2.1 AA) (+4)
Contrast (WCAG 2.1 AA)
| Element | Minimum ratio |
|---|---|
| Body text | 4.5:1 |
| Large text (18pt+ or 14pt bold) | 3:1 |
| UI components, icons | 3:1 |
| Focus indicators | 3:1 |
Touch Targets
- Minimum size: 44×44px
- Minimum spacing between adjacent targets: 8px
Interactive Elements
- ALL interactive elements MUST have visible focus states
- NEVER use
outline: nonewithout a replacement - Tab order must be logical; avoid
tabindex > 0
Forms
- Every input MUST have an associated
<label>(not just placeholder) - Error messages: use
aria-describedbyto associate with input - Don't disable submit buttons before first submission attempt
- Use
autocompleteattributes
Semantic HTML (first rule of ARIA: don't use ARIA if native HTML works)
<!-- CORRECT -->
<button type="button">Action</button>
<a href="/page">Navigate</a>
<!-- WRONG -->
<div onclick="...">Action</div>
<span class="link">Navigate</span>
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
vamseeachanta/workspace-hub
gsd-complete-milestone
Archive completed milestone and prepare for next version
vamseeachanta/workspace-hub
gsd-reapply-patches
Reapply local modifications after a GSD update
vamseeachanta/workspace-hub
gsd-verify-work
Validate built features through conversational UAT
vamseeachanta/workspace-hub
gsd-thread
Manage persistent context threads for cross-session work
vamseeachanta/workspace-hub
clinical-trial-protocol
Generate clinical trial protocols for medical devices or drugs through a modular, waypoint-based architecture with research-only and full protocol modes.
vamseeachanta/workspace-hub
single-cell-rna-qc
Performs quality control on single-cell RNA-seq data (.h5ad or .h5 files) using scverse best practices with MAD-based filtering and comprehensive visualizations.
Didn't find tool you were looking for?