# TEA Web Style Guide – WCAG Contrast Audit

**Standard:** WCAG 2.1 Level AA
**Thresholds:** 4.5:1 for normal text · 3.0:1 for large text (≥18.66px bold / 24px) and for UI component boundaries & graphical objects (1.4.11)
**Method:** Relative-luminance contrast ratio computed for every foreground/background pair in the design system, including hover and active states.

---

## Summary

Every text pairing across the system passes AA **except** the white-text-on-brand-blue surfaces, which sit at AA-Large only. Three clear-cut text failures were found and **fixed in this pass** (label text, warning colour, muted-text shade). The remaining item is a single brand decision (the lead blue). A few advisory notes cover non-text elements.

---

## Fixed in this pass

| Element | Before | After | Result |
|---|---|---|---|
| Category pill / label text (blue on blue-tint) | 3.64:1 ❌ | uses `--tea-accent-strong` → **5.5:1** | ✅ AA |
| Warning badge/label text | 3.27:1 ❌ | `--tea-warning` darkened to `#8f5a0e` → **5.19:1** | ✅ AA |
| Muted text on grey panels | 4.34:1 ❌ | `--tea-ink-3` darkened to `#646e79` → **4.87:1** | ✅ AA |

---

## One decision still open – the lead blue

White text on the exact brand blue `#4C8497` scores **4.15:1** – it passes AA-Large but is just under the 4.5:1 line for normal-size text. This affects three places:

- Primary button (resting state)
- Table header text
- Active pagination number

**Recommendation:** use a slightly deeper blue (`#3b6675`, already in the system as `--tea-accent-strong`) for these *white-text-on-blue* surfaces. That lifts all three to ~6.3:1 (comfortable AA) while keeping the exact `#4C8497` for large fills, gradients and headers where contrast isn't a text concern. This is the only thing standing between the system and a clean AA pass on all text.

---

## Advisory (non-text – lower priority)

- **Input field borders** (`#c7ced5` on white ≈ 1.6:1) and **card keylines** (`#e2e6ea` ≈ 1.25:1) don't meet the 3:1 UI-component guideline. Card outlines are decorative (the card is identified by its content + shadow) so they're exempt. Input borders are a grey area under 1.4.11 – fields are also identified by their label, fill and placeholder. A higher-contrast border is available on request if you want belt-and-braces compliance.
- **Event-card green meta icons** (`#54B071` ≈ 2.68:1) are decorative – they sit beside text that carries the meaning, so they're exempt from 1.4.11.
- **Brand green `#54B071`** must never be used as text/icon-only-meaning on white (2.68:1). It's only used for fills, the gradient, and decorative icons – all fine. White text needs the deeper green `#39774c` (used on the green button).
- **Overlay card text-over-image** relies on the bottom scrim. White text sits over the darkest part of the gradient (~85% ink), so it passes regardless of the photo – just keep the lower scrim dark when swapping images.

---

## Full results (post-fix)

All ✅ unless noted. Hover/active states included.

**Body & headings** – Ink 17.8:1 · Ink-2 9.6:1 · Muted 4.6–4.9:1 – all ✅
**Links** – text link & hover 6.3:1 ✅
**Buttons** – Primary base 4.15 (AA-Large); hover→green 5.4:1 ✅; active 7.1:1 ✅ · Accent base 5.4:1 ✅; hover→blue 6.3:1 ✅ · Danger 5.4:1 ✅; hover 7.0:1 ✅ · Secondary/Subtle 9–18:1 ✅
**Labels/badges** – accent 5.5:1 ✅ · success 4.8:1 ✅ · warning 5.2:1 ✅ · danger 4.6:1 ✅ · info 5.3:1 ✅
**Nav & menus** – link 9.6:1 ✅ · hover 15:1 ✅ · active 5.5:1 ✅ · dropdown hover 5.5:1 ✅
**Tabs** – pill active 6.3:1 ✅ · bleed bar white-on-navy 9.2:1 ✅ · bleed active 17.8:1 ✅
**Table** – header white-on-blue 4.15 (AA-Large; see decision)
**Breadcrumbs/pagination** – current 15.6:1 ✅ · link 5.2:1 ✅ · active white-on-blue 4.15 (AA-Large) · hover 5.5:1 ✅
**Alerts** – text 8.2–8.6:1 ✅ (all variants)
**Footer** – body 11:1 ✅ · muted 7:1 ✅ · heading 17.8:1 ✅
**Forms** – input text 17.8:1 ✅ · placeholder 5.2:1 ✅ · error 5.4:1 ✅
**Tooltip** – white-on-ink 17.8:1 ✅
**Focus ring** – blue-on-white 4.15:1 ✅ (meets 3:1 UI threshold)