[Mobile] Contrast Mode for Visually Impaired

[delos0]

Contrast Mode for Visually Impaired — Mobile App

Parent issue: #281

Description

Implement a high-contrast mode for the MapCess Flutter mobile app (Android and iOS) to support users with visual impairments. The contrast theme must meet WCAG 2.1 AA accessibility standards and be independently toggleable from dark/light mode.

Feature / Task Details

• Define high-contrast light and dark ThemeData variants with elevated colour contrast ratios
• Respect the device system accessibility setting (bold text / increased contrast) as the default on first launch via MediaQuery.of(context).highContrast
• Add a contrast mode toggle in the app settings screen
• Persist the user preference using shared_preferences
• Audit all existing screens and widgets — map screen, location cards, accessibility info panels, forms — to ensure WCAG 2.1 AA compliance in contrast mode
• Ensure contrast mode works in combination with both light and dark base themes

Deliverables

• High-contrast ThemeData variants defined and applied app-wide via MaterialApp
• Contrast mode toggle accessible from the settings screen
• All existing screens and widgets verified in contrast mode on Android and iOS

Acceptance Criteria

• Mobile app renders correctly in contrast mode on Android and iOS
• Device high-contrast accessibility setting respected on initial launch
• User can manually toggle contrast mode from settings
• Preference persists across app restarts (shared_preferences)
• WCAG 2.1 AA contrast ratio (4.5:1 text, 3:1 UI) verified on all screens
• Map screen and accessibility markers are clearly readable in contrast mode
• Contrast mode works correctly in combination with light and dark themes
• All tests pass
• Documentation updated (if applicable)

Deadline

01.05.2026

Notes

Use MediaQuery.of(context).highContrast to detect system-level contrast preference. Coordinate with the web team on shared colour palette and design tokens.