Contrast Theme Widget
Component Detail
User Interface
medium complexity
mobile
0
Dependencies
0
Dependents
0
Entities
0
Integrations
Description
Selection widget presenting three theme options — Standard, High Contrast, and Reduced Motion — each with a colour swatch preview. Validates that all displayed colour pairs meet WCAG 2.2 AA contrast ratios before rendering the preview.
contrast-theme-widget
Responsibilities
- Display theme option cards with colour swatches
- Highlight the currently active theme
- Emit theme selection events to parent screen
- Show WCAG compliance indicator per theme option
Interfaces
ContrastThemeWidget({required ContrastTheme selected, required ValueChanged<ContrastTheme> onChanged})
buildThemeCard(ContrastTheme theme)
getContrastRatioLabel(ContrastTheme theme)
isWcagCompliant(ContrastTheme theme)