full-stack-design-skills: Skill for Claude Code

Inclusive Design Patterns

Practical patterns for designing interfaces that work for everyone, including people with disabilities.

Accessibility isn't a nice-to-have feature—it's a core design principle. Inclusive design means designing from the start for people with disabilities, rather than retrofitting later. This benefits everyone: captions help in noisy environments, large text helps when tired, and clear navigation helps when distracted.

---

Core Principle: Design for Constraints

Who Benefits from Accessible Design?

People with permanent disabilities:

• Low vision (reduce text size? Problem. Use zoom + readable fonts.)
• Colorblindness (red/green can't distinguish? Use patterns + labels.)
• Motor impairments (can't use mouse? Keyboard navigation needed.)
• Deaf/hard of hearing (video has no captions? Can't understand.)
• Cognitive differences (complex language? Use clear, simple language.)

People in temporary situations:

• Broken arm (can't use mouse or type)
• Temporary vision loss (bright sun, dark room)
• Noisy environment (can't hear audio)
• Slow internet (images load slowly)
• Interrupted attention (loud office)

People in situational constraints:

• On mobile (small screen, touch, distraction)
• Older adults (presbyopia, tremor, slower reflexes)
• Non-native speakers (complex language is harder)
• Low literacy (jargon and long sentences confusing)

All of the above makes your product better for everyone.

---

Accessible Color Design

Color Contrast: WCAG Standards

Text must have sufficient contrast to be readable. WCAG defines two levels:

WCAG AA (minimum recommended):

• Regular text (< 18px): 4.5:1 contrast ratio
• Large text (≥ 18px bold or ≥ 24px regular): 3:1 contrast ratio

WCAG AAA (enhanced, for sensitive content):

• Regular text: 7:1 contrast ratio
• Large text: 4.5:1 contrast ratio

Contrast Examples

✅ Good: Black text on white background
- Contrast: 21:1 (very high)
- Passes WCAG AAA

✅ Good: Dark gray (#333) on white
- Contrast: 12.6:1
- Passes WCAG AAA

⚠️ Borderline: Medium gray (#666) on white
- Contrast: 3.3:1
- Fails WCAG AA for regular text
- Passes only for large text (18px+)

❌ Bad: Light gray (#ccc) on white
- Contrast: 1.4:1
- Fails all standards

❌ Bad: Red text on blue background
- Visually colorful but low contrast
- Fails for colorblind users