Preview Accessibility Settings Live Before Committing

The Accessibility Settings screen displays a live preview area that updates in real time as the user interacts with the Font Scale Widget slider or selects a contrast theme option in the Contrast Theme Widget. The preview renders representative UI elements (sample text at multiple semantic sizes, buttons, input fields, and a card component) using the currently selected but not yet committed settings. Only when the user explicitly confirms the selection does ThemeService persist the preference via ThemeRepository. A Cancel action reverts the preview to the currently saved settings without side effects.

HIGH story-typography-contrast-settings-coordinator-003 3 pts

Story Points

High

Priority

Typography & Contrast Settings

Feature

User Story

As a user

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

Acceptance Criteria

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
Given a user previews a setting change and then taps Confirm, when the preference is saved, then the app-wide theme and font scale update immediately to match the confirmed selection
Given the Accessibility Settings screen is open, when the live preview renders, then the WCAG Contrast Validator confirms that all colour pairs in the preview meet minimum contrast ratios before displaying them

Business Value

Live preview reduces the risk of users accidentally applying settings that worsen their experience and then being unable to navigate back to correct them — a critical usability concern for users with visual impairments or cognitive difficulties. This pattern mirrors established accessibility settings UX in iOS and Android, reducing the learning curve for the target demographic of elderly and impaired users. It also reduces support burden on coordinators who would otherwise need to assist peer mentors who have misconfigured their display settings.

Components

Typography & Contrast Settings

Related Feature

Coordinator

User Role