Skip to content

fix(storefront/a11y): raise sub-AA text contrast in pagination, cart line, cart summary, product gallery #1981

@filiphsps

Description

@filiphsps

What to build

Several user-visible labels fall below WCAG AA contrast on white/light surfaces:

  • pagination.tsx:110,132text-gray-400 on white for disabled prev/next (≈3.1:1, fails AA 4.5:1 for normal text)
  • cart-line.tsx:119,138text-gray-500 text-xs for strikethrough price and unit price on white
  • cart-summary.tsx:233text-xs opacity-75 shipping disclaimer (small text + opacity reduction compounds)
  • product-gallery.tsx:173text-gray-500 opacity-80 on bg-gray-100 for the alt-text badge

Raise to at least text-gray-600 (or design-token equivalent) and drop the opacity tricks. Keep the disabled visual distinct from enabled — outline style change or muted-but-readable color, not invisible.

Acceptance criteria

  • Every listed selector hits ≥4.5:1 contrast against its actual background (verify with Chrome DevTools Color Picker contrast widget)
  • Disabled pagination still reads as disabled visually (border weight or icon opacity, not text-color trick)
  • Lighthouse / axe contrast audits on cart and PDP no longer flag these elements

Blocked by

None — can start immediately.

References

  • apps/storefront/src/components/actionable/pagination.tsx:110,132
  • apps/storefront/src/components/cart/cart-line.tsx:119,138
  • apps/storefront/src/components/cart/cart-summary.tsx:233
  • apps/storefront/src/components/products/product-gallery.tsx:173

Metadata

Metadata

Assignees

No one assigned

    Labels

    BugSomething isn't workingComponentsready-for-agentFully specified, ready for an AFK agent

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions