Sufficient Color Contrast for All Interactive Elements
The app must enforce a contrast-safe color palette system where no UI element is rendered below WCAG 2.2 AA contrast thresholds. This includes text labels, button text, icon labels, input field borders, status badges, and navigation items. The contrast-ratio-validator must run at build time to reject non-compliant token combinations, and the contrast-safe-color-palette must expose only pre-validated color pairings to all UI components. Dynamic theme overrides from organization branding must also pass contrast checks before being applied. This is especially critical for peer mentors affiliated with Blindeforbundet and NHF, whose members may have significant vision impairments.
User Story
Acceptance Criteria
- Given a peer mentor views any screen in the app, when they look at body text on any background color, then the contrast ratio is at least 4.5:1 as defined by WCAG 2.2 AA
- Given a peer mentor sees a button or interactive control, when the control label or icon is rendered, then the contrast ratio against its background is at least 3:1
- Given the CI pipeline runs a build, when accessibility lint is executed by ci-accessibility-lint-runner, then any token combination failing the contrast threshold causes the build to fail
- Given an organization applies custom branding colors via the theme-builder, when the resulting color tokens are validated by contrast-ratio-validator, then only compliant combinations are permitted to be applied to the live UI
- Given a peer mentor uses the app outdoors in bright light conditions, when viewing the activity registration form, then all field labels and action buttons remain clearly legible without straining
Business Value
Approximately 300,000 Norwegians have some degree of vision impairment. For organizations like Blindeforbundet and NHF, whose members include people with significant vision loss, an app that fails contrast standards is effectively unusable for a large portion of the intended audience. Failing WCAG 2.2 AA also creates legal exposure under Norwegian anti-discrimination law (Diskriminerings- og tilgjengelighetsloven). Contrast enforcement built into the design token system prevents regressions as the app evolves, protecting all future feature development at zero marginal cost.
Components
- Contrast-Safe Color Palette Widget ui
- Contrast Ratio Validator Service service
- Token Accessibility Enforcer service
- Design Token Provider data
- Accessibility Token Manifest data
- CI Accessibility Lint Runner infrastructure
- Flutter Accessibility Lint Configuration infrastructure
- Accessible Theme Builder infrastructure
- Accessibility Design Token Enforcer infrastructure