Skip to content

a11y: type badge 'raw' color below WCAG AA contrast (item badge + browse pill) #112

Description

@mikkisguy

Context

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/item/[id]/page.tsx — the item detail type badge (from Item detail page foundation #25)
  • 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:

  1. 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.
  2. 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

Parent: Phase 3 — Web UI Core.

Metadata

Metadata

Assignees

No one assigned

    Labels

    needs-triageMaintainer needs to evaluate this issue

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions