Accessibility Menu

• Complexity: Moderate
• Stack: Frontend

As a user, I want to adjust font size, contrast, and motion settings so that I can use the application comfortably based on my visual needs.

Description

The application currently offers no accessibility customization. A ThemeService already exists in clib/services/ for managing theme state. This story extends the application with a settings panel where users can adjust font size, enable high contrast mode, and reduce motion. Settings take effect immediately and persist across sessions.

Acceptance Criteria

• [ ] An accessibility settings button is visible on all pages via the navbar component
• [ ] Users can select a font size: small, medium (default), large, or extra-large
• [ ] Changing font size immediately resizes text across the entire application
• [ ] Users can toggle high contrast mode — enabling it updates all background and text colors
• [ ] High contrast color combinations meet WCAG AA minimum contrast ratio (4.5:1)
• [ ] Users can toggle reduced motion — enabling it disables all animations and transitions
• [ ] Settings take effect immediately without a page reload
• [ ] Settings persist after closing and reopening the browser
• [ ] Default settings are applied when no stored preferences exist
• [ ] The accessibility menu can be opened, navigated, and closed using only the keyboard