Fix WCAG 2 AA Color Contrast Violations on Product Detail Page and Cart

[giridhari-gupta]

Description

Accessibility tests are detecting color contrast violations that fail WCAG 2 AA minimum contrast ratio requirements. These violations affect users with visual impairments who rely on sufficient color contrast to read text content.

Impact

Severity: Serious (WCAG 2 AA violation)
Affected Users: Users with visual impairments, low vision, or color blindness
WCAG Level: Level AA (required for compliance)

Affected Pages/Components

1. Product Detail Page (PDP)

• Component: Color variant swatch (text-based swatches without images)
• Element: <div>Navy</div> - Color variant name text
• Location: Product variation selector (SwatchGroup component)
• File: packages/template-retail-react-app/app/components/product-view/index.jsx (lines 598-600)

2. Cart Page

• Component 1: Strikethrough price elements
  • Element: <s>$89.00</s> and <s>$119.00</s> - Original/previous prices
  • Location: Cart item price display
• Component 2: Color variant swatch (same as PDP)
  • Element: <div>Navy</div> - Color variant name text
  • Location: Cart item variant display

Specific Violations

Violation 1: Color Variant Text (PDP & Cart)

• Rule: color-contrast
• Current Contrast Ratio: 1.65:1
• Required Ratio: 4.5:1 (for normal text, 16px)
• Foreground Color: #c9c9c9 (light gray)
• Background Color: #ffffff (white)
• Element: Color variant name text (e.g., "Navy") when displayed as text without image swatch
• Impact: Text is nearly unreadable for users with visual impairments

Violation 2: Strikethrough Prices (Cart only)

• Rule: color-contrast
• Current Contrast Ratio: 4.21:1
• Required Ratio: 4.5:1 (for normal text, 16px)
• Foreground Color: #747474 (medium gray)
• Background Color: #f3f3f3 (light gray)
• Element: Strikethrough price text (<s> tags) showing original prices
• Impact: Slightly below threshold, may be difficult to read for some users

Steps to Reproduce

1. Navigate to a product detail page with color variants (e.g., a product with "Navy" color option)
2. If the color variant doesn't have an image swatch, it will display as text "Navy"
3. Run accessibility scan using axe DevTools or Playwright a11y tests
4. Add product to cart and navigate to cart page
5. Check cart items with strikethrough prices (original prices)

Expected Behavior

All text elements should meet WCAG 2 AA minimum contrast ratio of 4.5:1 for normal text (or 3:1 for large text).

Actual Behavior

• Color variant text "Navy" has contrast ratio of 1.65:1 (fails)
• Strikethrough prices have contrast ratio of 4.21:1 (fails by 0.29)

Suggested Fixes

Fix 1: Color Variant Text Contrast

Location: packages/template-retail-react-app/app/components/swatch-group/swatch.jsx or related styling

Option A: Increase text color darkness for text-based swatches

• Change from #c9c9c9 to at least #767676 (provides 4.5:1 contrast on white)
• Or use #595959 for better contrast (provides 7:1 contrast)

Option B: Add background color for text swatches

• Apply a darker background when displaying text-based swatches
• Ensure contrast meets 4.5:1 ratio

Option C: Use image swatches when available, or improve disabled/unselected state styling

Fix 2: Strikethrough Price Contrast

Location: Cart item price components

Option A: Darken strikethrough text color

• Change from #747474 to #6b6b6b or darker to achieve 4.5:1 contrast
• Or use #666666 for better contrast (provides 5.1:1 contrast on #f3f3f3)

Option B: Adjust background color

• Use a lighter background color to improve contrast

Technical Details

Test Files

• Snapshot: e2e/tests/a11y/desktop/__snapshots__/guest/pdp-a11y-violations.json
• Snapshot: e2e/tests/a11y/desktop/__snapshots__/guest/cart-a11y-violations.json
• Test: e2e/tests/a11y/desktop/a11y-snapshot-test-guest.spec.js

Related Components

• packages/template-retail-react-app/app/components/swatch-group/swatch.jsx
• packages/template-retail-react-app/app/components/product-view/index.jsx
• packages/template-retail-react-app/app/components/item-variant/ (cart item variants)

CSS/Theme Files

• Check Chakra UI theme configuration for swatch and price styling
• May need to update color tokens in theme configuration

References

• WCAG 2.1 Color Contrast Requirements
• axe DevTools Color Contrast Rule
• WebAIM Contrast Checker

Acceptance Criteria

• Color variant text meets 4.5:1 contrast ratio on white background
• Strikethrough prices meet 4.5:1 contrast ratio on cart background
• All a11y snapshot tests pass
• Visual design remains acceptable (not too dark/harsh)
• Manual accessibility testing confirms improvements

Additional Notes

• These violations were discovered during a11y snapshot test updates
• The violations are pre-existing and not related to recent changes
• Consider reviewing all color variant swatches and price displays for similar issues
• May want to add automated contrast checking in CI/CD pipeline