You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Spun out of #25 (item detail page foundation). The @oracle review of #25 flagged a WCAG AA contrast gap on the type badge that is cross-cutting (it also affects the pre-existing Browse card "pill" variant) and whose fix is a design-system decision, so it was deferred from #25 rather than applied as a drive-by.
Problem
The filled type badge uses text-background (#0a0a0a) on the type's --color-type-* token. Nine of the ten types pass AA comfortably (≥6:1). The neutral raw type (--type-raw: #6b7280, also the fallback for every unknown type) yields ~4.1:1 against near-black text — below the 4.5:1 threshold for small text (text-[0.65rem] uppercase).
Affected surfaces (both use the same bg-type-* + text-background filled-chip treatment):
src/app/browse/content-card.tsx — the Browse feed card variant="pill" (pre-existing)
Neither near-black nor cream foreground passes on #6b7280, so the fix must touch the background:
Lighten the shared --color-type-raw token (gray-500 #6b7280 → a lighter neutral with luminance ≥ ~0.19 so black text clears 4.5:1). Cross-cutting: also changes every raw/unknown dot in browse / command-palette / item.
Or special-case the badge/pill background for the neutral type (e.g. a tinted/outline chip).
Option 1 is the single-source fix but is a design-token change that should be reviewed against every dot/pill/chip usage; option 2 keeps the dot color but diverges the badge treatment.
Acceptance criteria
raw (and unknown-type) type badge / pill text meets WCAG AA (≥4.5:1) against its background
No regression to the saturated type badges (which currently pass)
Visual review of all --type-raw usages if the token is changed
Context
Spun out of #25 (item detail page foundation). The
@oraclereview of #25 flagged a WCAG AA contrast gap on the type badge that is cross-cutting (it also affects the pre-existing Browse card "pill" variant) and whose fix is a design-system decision, so it was deferred from #25 rather than applied as a drive-by.Problem
The filled type badge uses
text-background(#0a0a0a) on the type's--color-type-*token. Nine of the ten types pass AA comfortably (≥6:1). The neutralrawtype (--type-raw: #6b7280, also the fallback for every unknown type) yields ~4.1:1 against near-black text — below the 4.5:1 threshold for small text (text-[0.65rem]uppercase).Affected surfaces (both use the same
bg-type-*+text-backgroundfilled-chip treatment):src/app/item/[id]/page.tsx— the item detail type badge (from Item detail page foundation #25)src/app/browse/content-card.tsx— the Browse feed cardvariant="pill"(pre-existing)Neither near-black nor cream foreground passes on
#6b7280, so the fix must touch the background:--color-type-rawtoken (gray-500#6b7280→ a lighter neutral with luminance ≥ ~0.19 so black text clears 4.5:1). Cross-cutting: also changes everyraw/unknown dot in browse / command-palette / item.Option 1 is the single-source fix but is a design-token change that should be reviewed against every dot/pill/chip usage; option 2 keeps the dot color but diverges the badge treatment.
Acceptance criteria
raw(and unknown-type) type badge / pill text meets WCAG AA (≥4.5:1) against its background--type-rawusages if the token is changedParent: Phase 3 — Web UI Core.