Availability slots distinguish available, booked, blocked, and past using color plus non-color indicator

Color is not a reliable communication channel. Roughly 8% of men have color vision deficiency, making red/green-only slot states indistinguishable. This violates WCAG 2.2 SC 1.4.1 (Use of Color) directly, and SC 1.4.3 (Contrast Minimum) compounds the problem when low-contrast grays are used for past/blocked states. The legal exposure under ADA Title III is real for booking platforms serving the public. Beyond compliance, a color-blind user who cannot distinguish booked from available slots will either book into a conflict or abandon the flow — both outcomes cost revenue.

Pair every slot state color with an independent non-color indicator — an icon, a text label, or a pattern — so the state is decodable without color perception. Map all four states explicitly.

// src/components/CalendarSlot.tsx
const STATE = {
  available: { bg: 'bg-green-100', icon: '✓', label: 'Available' },
  booked:    { bg: 'bg-red-100',   icon: '✕', label: 'Booked'    },
  blocked:   { bg: 'bg-gray-200',  icon: '⊘', label: 'Blocked'   },
  past:      { bg: 'bg-gray-100',  icon: '◄', label: 'Past'      },
} as const

export function CalendarSlot({ status, time }: { status: keyof typeof STATE; time: string }) {
  const s = STATE[status]
  return (
    <div className={`${s.bg} p-2 rounded flex items-center gap-1`} aria-label={`${s.label}: ${time}`}>
      <span aria-hidden="true">{s.icon}</span>
      <span className="text-xs font-medium">{time}</span>
    </div>
  )
}

Verify contrast ratios for all four background/text combinations using the WCAG contrast checker — aim for ≥4.5:1 for normal text.