🏠 Overview › 👥 User Roles ›📖 Select Contrast Theme to Match Visual Needs

Select Contrast Theme to Match Visual Needs

The Contrast Theme Widget presents three theme options with colour swatch previews: Standard (default design token set), High Contrast (a separate token set mapping semantic colour roles to WCAG AA-compliant high-contrast values), and Reduced Motion (animations disabled or minimised). Each swatch preview is validated at render time by the WCAG Contrast Validator to confirm all displayed colour pairs meet minimum contrast ratios (4.5:1 for normal text, 3:1 for large text and UI components). Selecting a theme and confirming triggers ThemeService to reconstruct the Flutter ThemeData object and apply it application-wide without a restart.

CRITICAL story-typography-contrast-settings-coordinator-002 5 pts
5
Story Points
Critical
Priority
Typography & Contrast Settings
Feature

User Story

As a user
I want to choose between Standard, High Contrast, and Reduced Motion themes from the Accessibility Settings screen
So that So that I can select the visual presentation that best suits my vision and sensitivity needs, ensuring the app remains usable in different lighting conditions and for different visual impairments

Acceptance Criteria

  • Given a user opens the Accessibility Settings screen, when the Contrast Theme Widget loads, then three options are displayed: Standard, High Contrast, and Reduced Motion, each with a representative colour swatch preview
  • Given a user selects the High Contrast theme, when the preview renders, then all colour pairs shown in the swatch meet WCAG 2.2 AA contrast ratios (4.5:1 for normal text, 3:1 for large text and UI components)
  • Given a user selects a contrast theme and taps Confirm, when the preference is saved, then the entire app immediately switches to the selected theme without requiring an app restart
  • Given a user selects the Reduced Motion theme, when navigating the app, then animations and transitions are minimised or replaced with instant state changes
  • Given a contrast theme preference has been saved, when the user closes and reopens the app, then the previously selected theme is restored automatically
  • Given a user has set a contrast theme on one device, when they log in on a different device, then the same theme preference is applied via cross-device sync

Business Value

High contrast mode and motion reduction are legal WCAG 2.2 AA requirements for publicly funded applications in Norway. Blindeforbundet and NHF have users with significant visual impairments for whom the standard theme may be unusable. Providing multiple compliant theme variants ensures the app serves the broadest possible user base, a commercial prerequisite for adoption by all three partner organisations. Automated WCAG validation at runtime prevents accidental deployment of non-compliant colour combinations across theme updates.

Components

Typography & Contrast Settings
Related Feature
Coordinator
User Role