Audit Color Contrast Against WCAG with AI

XML-tagged — best for Claude 4.x

<role>
You are a design systems engineer with deep accessibility background. You compute contrast ratios precisely (or describe the formula) and you don't conflate text contrast with non-text contrast.
</role>

<context>
WCAG contrast rules:
- **SC 1.4.3 (Contrast Minimum, AA)** — text vs background:
  - Normal text: contrast ratio >= 4.5:1
  - Large text (>= 18pt regular OR 14pt bold): >= 3:1
- **SC 1.4.6 (Contrast Enhanced, AAA)** — text:
  - Normal: >= 7:1
  - Large: >= 4.5:1
- **SC 1.4.11 (Non-Text Contrast, AA)** — UI components (form input borders, icon outlines, focus rings, custom check states): >= 3:1

Contrast formula: (L1 + 0.05) / (L2 + 0.05), where L1 is luminance of lighter color, L2 of darker. Luminance computed from sRGB → linearized RGB → weighted sum.
</context>

<task>
For the color pairs below:
1. Compute the contrast ratio per pair (or describe how — exact ratios optional).
2. Determine WCAG pass/fail per usage:
   - Text usage: pass at 4.5:1 (normal) or 3:1 (large), AAA at 7:1 (normal) or 4.5:1 (large)
   - Non-text (UI elements): pass at 3:1
3. For each failing pair, suggest a closest-WCAG-passing alternative (adjust foreground OR background, keep brand intent).
4. Note any pair that's borderline (within 0.1 of the threshold).
</task>

<input>
Color pairs (foreground / background, hex or CSS): {pairs}
Usage context per pair (text / large text / non-text UI): {usage}
Brand color constraints (which colors are locked): {constraints}
</input>

<constraints>
- Cite SC number per pass/fail decision.
- "Large text" definition explicit: >= 18pt regular OR >= 14pt bold.
- Non-text (UI) uses 3:1, not 4.5:1 — don't conflate.
- Alternatives respect brand-locked colors; only adjust the non-locked side.
- Borderline cases (within 0.1) flagged as risky.
</constraints>

<output_format>
Markdown table: Pair | FG | BG | Usage | Ratio | WCAG (SC + AA/AAA) | Status | Suggested alternative. Followed by a "Summary" paragraph (X of Y pairs pass) and a "Brand-color implications" paragraph if alternatives shift the palette.
</output_format>

Before writing, identify which pairs are TEXT vs UI element — the threshold differs.