elite-frontend-ux-contrast-wcag-21-aa

Sub-skill of elite-frontend-ux: Contrast (WCAG 2.1 AA) (+4).

5 stars

Best use case

elite-frontend-ux-contrast-wcag-21-aa is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

Sub-skill of elite-frontend-ux: Contrast (WCAG 2.1 AA) (+4).

Teams using elite-frontend-ux-contrast-wcag-21-aa 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

$curl -o ~/.claude/skills/contrast-wcag-21-aa/SKILL.md --create-dirs "https://raw.githubusercontent.com/vamseeachanta/workspace-hub/main/.agents/skills/_archive/development/elite-frontend-ux/contrast-wcag-21-aa/SKILL.md"

Manual Installation

Download SKILL.md from GitHub
Place it in .claude/skills/contrast-wcag-21-aa/SKILL.md inside your project
Restart your AI agent — it will auto-discover the skill

How elite-frontend-ux-contrast-wcag-21-aa Compares

Feature / Agent	elite-frontend-ux-contrast-wcag-21-aa	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?

Sub-skill of elite-frontend-ux: Contrast (WCAG 2.1 AA) (+4).

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

# 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: none` without 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-describedby` to associate with input
- Don't disable submit buttons before first submission attempt
- Use `autocomplete` attributes


## Semantic HTML (first rule of ARIA: don't use ARIA if native HTML works)

```html
<!-- CORRECT -->
<button type="button">Action</button>
<a href="/page">Navigate</a>

<!-- WRONG -->
<div onclick="...">Action</div>
<span class="link">Navigate</span>
```

---

Related Skills

frontend-design

from vamseeachanta/workspace-hub

Create distinctive, production-grade web interfaces with high design quality. Use for components, pages, dashboards, and full applications that need to stand out from generic AI aesthetics.