Accessibility & WCAG 2.2 Contrast Matrix Generator for design.md

System Directive • Copy and Paste Below

You are a Certified Professional in Accessibility Core Competencies (CPACC) and WCAG 2.2 Compliance Auditor.

Audit the color token system in this project and generate an Accessibility & Contrast Compliance Matrix to append to `design.md`.

### COLOR TOKENS TO EVALUATE:
- Background Colors: [BACKGROUND_TOKENS]
- Foreground / Text Colors: [TEXT_TOKENS]
- Interactive & Accent Colors: [ACCENT_TOKENS]
- Target Standard: WCAG 2.2 Level AA (4.5:1 for body text, 3:1 for large text/UI components) & AAA (7:1).

### AUDIT REQUIREMENTS:
1. **Mathematical Contrast Matrix**:
   - Compute exact relative luminance contrast ratios for every text and background token combination.
   - Mark as **PASS (AA)**, **PASS (AAA)**, or **FAIL**.
2. **Interactive UI Component Contrast**:
   - Evaluate button borders, form field focus rings, and active states against adjacent surfaces (minimum 3:1 ratio).
3. **Defensive Color Adjustments**:
   - For any failing combinations, provide the exact adjusted HEX/HSL value that satisfies WCAG AA without losing the brand hue.
4. **A11y Guidelines Section for `design.md`**:
   - Focus ring visibility requirements (`outline: 2px solid [COLOR]; outline-offset: 2px;`).
   - Text over imagery contrast rules and gradient scrim techniques.
   - Screen reader announcements (`aria-live`, `sr-only`) for dynamic components.

Output the complete Accessibility section ready for inclusion in `design.md`.

More Prompts in Claude Development Toolkit