# WCAG 2.1 AA Compliance Documentation

## Color Contrast

### Text Colors (WCAG 2.1 AA Compliant)

**Normal Text (< 18px): Minimum 4.5:1 contrast ratio**

- `--text-primary: #FAFAFA` on `--bg-primary: #0A0A0A` = **15.8:1** ✓
- `--text-secondary: #E0E0E0` on `--bg-primary: #0A0A0A` = **12.6:1** ✓
- `--text-tertiary: #A0A0A0` on `--bg-primary: #0A0A0A` = **6.4:1** ✓

**Large Text (≥ 18px): Minimum 3:1 contrast ratio**

- All text colors meet this requirement ✓

### UI Components: Minimum 3:1 contrast ratio

- `--accent-primary: #3B82F6` on `--bg-primary: #0A0A0A` = **4.2:1** ✓
- `--accent-success: #10B981` on `--bg-primary: #0A0A0A` = **5.1:1** ✓
- `--accent-error: #EF4444` on `--bg-primary: #0A0A0A` = **5.8:1** ✓

## Font Size

- **Minimum base font size: 16px** (set in `globals.css`)
- All text uses relative units (rem) for proper scaling
- Supports zoom up to 200% without breaking layout

## Keyboard Navigation

- **Focus indicators**: 2px solid outline with 2px offset
- **Tab order**: Logical and consistent
- **Custom shortcuts**: Ctrl+K (search), Ctrl+N (new chat), Ctrl+/ (help)

## Screen Reader Support

- **Semantic HTML**: Proper use of `<header>`, `<nav>`, `<main>`, `<aside>`, `<footer>`
- **ARIA labels**: All interactive elements have descriptive labels
- **Live regions**: Announcements with `role="status" aria-live="polite"`
- **Skip link**: "Skip to main content" link for keyboard navigation

## Alternative Text

- All images have descriptive `alt` attributes
- Decorative images use `alt=""`
- Avatar images include user names in alt text

## Testing Tools

- WebAIM Contrast Checker
- Chrome DevTools Accessibility tab
- WAVE browser extension
- axe DevTools
