Organization Branding Applied Without Compromising Accessibility
The app serves NHF, Blindeforbundet, HLF, and Barnekreftforeningen — each with distinct brand identities. The theme-builder and design-token-provider must support per-organization theme customization, but all theme configurations must be validated by the accessibility-design-token-enforcer before deployment. Organization-specific color tokens replace the default palette but must pass the contrast-ratio-validator against all text and UI element combinations. The terminology system (via org-labels-provider) provides organization-specific terminology without affecting visual accessibility. The accessibility-token-manifest defines which tokens are overridable (brand colors, logo) and which are immutable (minimum contrast, touch targets, font weights).
User Story
Acceptance Criteria
- Given a peer mentor from HLF opens the app, when the HLF brand theme is applied, then HLF's brand colors replace the default palette while all contrast ratios remain at or above 4.5:1 for body text
- Given an organization administrator uploads a custom brand color via the theme-builder, when the color is applied as a primary button background, then the contrast-ratio-validator automatically selects a compliant foreground text color (white or dark) to maintain the 4.5:1 threshold
- Given a peer mentor from Blindeforbundet uses the app, when the Blindeforbundet theme is active, then all accessibility-immutable tokens (minimum touch targets, minimum font weight, spacing rules) remain unchanged by the branding customization
- Given a new organization is onboarded to the platform, when their brand configuration is submitted via theme-builder, then the accessibility-design-token-enforcer validates the full theme before it goes live and rejects or auto-corrects any non-compliant color combinations
- Given an external accessibility auditor reviews a specific organization's branded app version, when evaluating WCAG 2.2 AA compliance, then the branded version passes all contrast and interaction requirements identically to the default theme
Business Value
Each of the four organizations has distinct visual identities. Refusing to support organization branding would make the platform unacceptable to partner organizations. However, unconstrained branding customization is a common source of accessibility regressions — organizations choose brand colors for aesthetic reasons, not accessibility compliance.
A guided theme-builder that validates accessibility constraints at input time enables both organizational autonomy and accessibility compliance without ongoing manual review, directly enabling scalability to additional organizations.
Components
- Accessible Theme Builder infrastructure
- Design Token Provider data
- Contrast-Safe Color Palette Widget ui
- Contrast Ratio Validator Service service
- Accessibility Design Token Enforcer infrastructure
- Token Accessibility Enforcer service
- Accessibility Token Manifest data
- Design Token Theme infrastructure