MEDIUM: Improve Color Contrast to Meet WCAG AA/AAA Standards

[nathanbangwa243]

Issue

Color contrast ratios are suboptimal for WCAG compliance. Some text is difficult to read, especially for users with low vision or color blindness.

Current State

• Muted text (text-gray-500 #6b7280 on white): ~4.5:1 (WCAG AA)
• Success indicator (✓ on light green): Small and low visibility
• Instructions text: Uses muted color, borderline readable
• Card Deck neon text relies on text-shadow glows (fallback readability issue)

WCAG Target

• WCAG AA: 4.5:1 for normal text, 3:1 for large text
• WCAG AAA: 7:1 for normal text, 4.5:1 for large text

Impact

• Non-compliance with WCAG AA (which is legal minimum in many jurisdictions)
• Excluded users with vision impairments
• Difficult to read on bright outdoor screens

Recommended Implementation

• Upgrade muted text to text-gray-700 (#374151) for 7:1 contrast
• Increase success checkmark size and use bold font
• Use font-bold for all progress labels
• Provide fallback styling for neon text (ensure readability without glow)
• Test with WebAIM Contrast Checker
• Verify all text combinations pass WCAG AAA

Files to Update

• app/static/css/app.css (update muted color)
• app/templates/components/bingo_board.html (increase checkmark size)
• app/templates/components/scavenger_list.html (improve label contrast)
• app/templates/components/card_deck.html (add fallback text styling)