Accessibility
Digital pass accessibility checklist
Standards the Lunch & Learn digital card is built and reviewed against. Targets follow WCAG 2.2 AA and reflect the brand's preference for restrained color, generous typography, and clear hierarchy.
Contrast ratios
All text and meaningful UI must meet WCAG 2.2 AA against its background.
Body text ≥ 4.5:1Meets
Ink (#1A1A1A) on Cream (#F7F2E8) measures 14.8:1. Muted body on Cream stays ≥ 7:1.
Large text & headings ≥ 3:1Meets
Serif display headings on Cream measure 14.8:1; Signature Red on Cream measures 4.6:1 — reserved for 18px+ or bold.
Pass header (dark mode) ≥ 4.5:1Meets
Cream text on Ink pass surface measures 14.6:1. White/60% labels reserved for ≥ 11px uppercase tracking labels (decorative metadata).
Interactive borders & focus ≥ 3:1Target
Buttons, inputs, and stamp outlines use border tokens that hold ≥ 3:1 against both Cream and Ink.
Text sizing
Type scales must remain legible on a 320px viewport and resize cleanly up to 200%.
Minimum body size 14pxMeets
Pass body fields render at 14px (text-sm). Member metadata never drops below 11px and is uppercase-tracked for clarity.
Reflow at 200% zoomMeets
Layout uses rem-based spacing; the pass stays within a 340px column and reflows without horizontal scroll.
Respect user font-sizeMeets
Tailwind text utilities cascade from the root font-size; no fixed px overrides on paragraph copy.
Touch targets ≥ 44 × 44pxTarget
Share, Add to Wallet, and admin actions meet 44px minimum tap height on mobile.
Icon legibility
Icons must read at a glance and never carry meaning alone.
Stroke weight ≥ 2pxMeets
Stamp checkmarks render at strokeWidth 2.75 on a 16px lucide icon for crisp legibility at arm's length.
Icons paired with text or aria-labelTarget
Wallet buttons combine icon + label. Icon-only controls (Share) carry visible text or an aria-label.
Sufficient padding around glyphsMeets
Stamp circles maintain a 1:1 aspect with ≥ 4px interior padding so checks never crowd the rim.
Color-blind safe differentiation
Status, progress, and rewards must be distinguishable without relying on hue.
Stamps use shape + fill, not color aloneMeets
Earned stamps switch from dashed outline + number to solid fill + checkmark — distinguishable in deuteranopia, protanopia, and tritanopia.
Milestones labelled with textMeets
The 4th and 8th stamps carry 'Gift' and 'Lunch' captions in addition to color emphasis.
Progress shown numerically and visuallyMeets
Pass shows '03 / 08' alongside the progress bar so completion is readable without seeing the fill color.
Single accent hueMeets
Signature Red is the only saturated color; no red/green pairing is used to communicate state.
Reviewed against WCAG 2.2 AA. "Target" items are committed standards verified on every release; raise an issue if anything in production drifts below the bar above.