Typography & Contrast Settings
Feature Detail
Description
Typography & Contrast Settings consolidates scalable text sizing, high contrast mode, and WCAG 2.2 AA compliance into a user-configurable accessibility settings screen backed by a persistent theme system. Users can independently adjust font scale (ranging from 85% to 200% of base size) and switch between standard, high-contrast, and reduced-motion themes. All theme variants are validated against WCAG 2.2 AA minimum contrast ratios (4.5:1 for normal text, 3:1 for large text and UI components), and the design token system enforces compliant color combinations at the component level.
Analysis
All three workshop organizations highlighted scalable text, sufficient contrast, and avoidance of thin or italic fonts as baseline requirements for their user populations, which include elderly users, users with low vision, and users with motor impairments that make precise tapping on small text difficult. WCAG 2.2 AA compliance is a legal requirement for applications receiving public funding in Norway, making this feature mandatory for commercial viability with NHF, Blindeforbundet, and HLF. User-configurable typography also reduces reliance on OS-level accessibility settings, which peer mentors may be unfamiliar with, and ensures the application remains usable for the broadest possible audience without requiring device reconfiguration.
The implementation centers on a ThemeService that reads ThemeRepository preferences and constructs a Flutter ThemeData object at app startup and on preference change. Font scale is implemented via Flutter's textScaleFactor at the MaterialApp level, not per-widget, ensuring consistent scaling across all screens. High contrast theme is a separate token set in the DesignTokensConfig that maps semantic color roles (surface, onSurface, primary, onPrimary) to WCAG AA-compliant high-contrast values. A ContrastThemeWidget in the Accessibility Settings screen provides a live preview before the user commits. All theme variants are tested programmatically using a contrast ratio utility that asserts minimum ratios against WCAG 2.2 thresholds. Preferences are stored in AccessibilityPreferencesRepository (Supabase) and synced across devices.
Dependencies
Definition of Done
Components (6)
User Stories (12)
As a As a user
I want I want to navigate to typography and contrast settings from the main Settings screen
So that So that I can discover and adjust accessibility preferences without needing to know where in the app they are located, reducing the chance that accessibility features go unused by users who need them most
- Given a user opens the Settings screen, when the screen loads, then an Accessibility settings entry is visible with a clear label and an icon
- Given the user has a non-default accessibility preference saved, when the Settings screen loads, then the Accessibility entry displays a subtitle reflecting the active settings (e.g., font scale percentage, active theme name)
- Given a user taps the Accessibility entry on the Settings screen, when the navigation occurs, then the Accessibility Settings screen opens displaying both the Font Scale Widget and the Contrast Theme Widget
- +1 more
As a As a user
I want I want to see a live preview of font scale and contrast theme changes on the Accessibility Settings screen before I save them
So that So that I can evaluate whether the selected settings actually improve readability for me before committing the change, and avoid being stuck with settings that are difficult to navigate or reverse
- Given a user adjusts the font scale slider, when the slider position changes, then a sample text block on the same screen immediately reflects the new scale before the user taps Confirm
- Given a user selects a contrast theme option, when the option is highlighted, then the preview area on the Accessibility Settings screen immediately renders using the selected theme colours without persisting the change
- Given a user previews a setting change and then taps Cancel, when the settings screen closes, then the app continues using the previously saved font scale and contrast theme
- +2 more
As a As a user
I want I want my font scale and contrast theme preferences to be automatically restored when I log in on any device
So that So that I do not have to reconfigure accessibility settings every time I switch devices or reinstall the app, ensuring a consistent and accessible experience from the first screen after login
- Given a user has saved non-default font scale and contrast theme preferences, when they close and reopen the app on the same device, then the saved preferences are applied before the first screen is displayed
- Given a user has saved accessibility preferences on one device, when they log in on a different device for the first time, then the same font scale and contrast theme are applied immediately after login without requiring manual reconfiguration
- Given a user updates their accessibility preferences on one device while logged in on a second device, when the change is saved, then the second device reflects the new preference within a reasonable sync window
- +2 more
As a As a user
I want I want to navigate to typography and contrast settings from the main Settings screen
So that So that I can discover and adjust accessibility preferences without needing to know where in the app they are located, reducing the chance that accessibility features go unused by users who need them most
- Given a user opens the Settings screen, when the screen loads, then an Accessibility settings entry is visible with a clear label and an icon
- Given the user has a non-default accessibility preference saved, when the Settings screen loads, then the Accessibility entry displays a subtitle reflecting the active settings (e.g., font scale percentage, active theme name)
- Given a user taps the Accessibility entry on the Settings screen, when the navigation occurs, then the Accessibility Settings screen opens displaying both the Font Scale Widget and the Contrast Theme Widget
- +1 more
As a As a user
I want I want to see a live preview of font scale and contrast theme changes on the Accessibility Settings screen before I save them
So that So that I can evaluate whether the selected settings actually improve readability for me before committing the change, and avoid being stuck with settings that are difficult to navigate or reverse
- Given a user adjusts the font scale slider, when the slider position changes, then a sample text block on the same screen immediately reflects the new scale before the user taps Confirm
- Given a user selects a contrast theme option, when the option is highlighted, then the preview area on the Accessibility Settings screen immediately renders using the selected theme colours without persisting the change
- Given a user previews a setting change and then taps Cancel, when the settings screen closes, then the app continues using the previously saved font scale and contrast theme
- +2 more
As a As a user
I want I want my font scale and contrast theme preferences to be automatically restored when I log in on any device
So that So that I do not have to reconfigure accessibility settings every time I switch devices or reinstall the app, ensuring a consistent and accessible experience from the first screen after login
- Given a user has saved non-default font scale and contrast theme preferences, when they close and reopen the app on the same device, then the saved preferences are applied before the first screen is displayed
- Given a user has saved accessibility preferences on one device, when they log in on a different device for the first time, then the same font scale and contrast theme are applied immediately after login without requiring manual reconfiguration
- Given a user updates their accessibility preferences on one device while logged in on a second device, when the change is saved, then the second device reflects the new preference within a reasonable sync window
- +2 more
As a As a user
I want I want to adjust the font scale between 85% and 200% of the base size using an interactive slider
So that So that I can read all text in the app comfortably without relying on OS-level accessibility settings or struggling with text that is too small or too large for my needs
- Given a user opens the Accessibility Settings screen, when they interact with the Font Scale Widget slider, then the slider moves smoothly between 85% and 200% of the base font size in defined increments
- Given a user drags the font scale slider, when the slider position changes, then a sample text block below the slider immediately updates to reflect the selected scale factor
- Given a user selects a font scale and taps Confirm, when the preference is saved, then all text throughout the app scales uniformly to the selected factor without requiring an app restart
- +2 more
As a As a user
I want 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
- 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
- +3 more
As a As a user
I want I want every theme variant presented in the app to be guaranteed to meet WCAG 2.2 AA contrast requirements for all text and UI components
So that So that I can trust that whichever theme I select — including the default Standard theme — the app is legally compliant and readable for my level of vision, without needing to manually verify colour combinations
- Given the app build process runs, when the WCAG Contrast Validator checks all theme token sets, then every normal text colour pair must achieve at least 4.5:1 contrast ratio and large text / UI component pairs must achieve at least 3:1
- Given a theme fails the minimum contrast threshold in the automated build check, when the build is evaluated, then the build fails and the non-compliant colour pair is reported with its actual contrast ratio
- Given a user is previewing a contrast theme in the Accessibility Settings screen, when the Contrast Theme Widget renders the preview swatches, then the WCAG Contrast Validator confirms each displayed colour pair meets the minimum ratio before the swatch is shown
- +2 more
As a As a user
I want I want to adjust the font scale between 85% and 200% of the base size using an interactive slider
So that So that I can read all text in the app comfortably without relying on OS-level accessibility settings or struggling with text that is too small or too large for my needs
- Given a user opens the Accessibility Settings screen, when they interact with the Font Scale Widget slider, then the slider moves smoothly between 85% and 200% of the base font size in defined increments
- Given a user drags the font scale slider, when the slider position changes, then a sample text block below the slider immediately updates to reflect the selected scale factor
- Given a user selects a font scale and taps Confirm, when the preference is saved, then all text throughout the app scales uniformly to the selected factor without requiring an app restart
- +2 more
As a As a user
I want 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
- 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
- +3 more
As a As a user
I want I want every theme variant presented in the app to be guaranteed to meet WCAG 2.2 AA contrast requirements for all text and UI components
So that So that I can trust that whichever theme I select — including the default Standard theme — the app is legally compliant and readable for my level of vision, without needing to manually verify colour combinations
- Given the app build process runs, when the WCAG Contrast Validator checks all theme token sets, then every normal text colour pair must achieve at least 4.5:1 contrast ratio and large text / UI component pairs must achieve at least 3:1
- Given a theme fails the minimum contrast threshold in the automated build check, when the build is evaluated, then the build fails and the non-compliant colour pair is reported with its actual contrast ratio
- Given a user is previewing a contrast theme in the Accessibility Settings screen, when the Contrast Theme Widget renders the preview swatches, then the WCAG Contrast Validator confirms each displayed colour pair meets the minimum ratio before the swatch is shown
- +2 more