Guarantee WCAG 2.2 AA Contrast Compliance Across All Theme Variants

The WCAG Contrast Validator service programmatically asserts minimum contrast ratios (4.5:1 for normal text, 3:1 for large text and UI components) against WCAG 2.2 AA thresholds for all colour pair combinations defined in each theme's design token set. Validation runs both at build time as part of the automated test suite, preventing non-compliant themes from being released, and at runtime when the Contrast Theme Widget renders previews, ensuring live validation before the user commits. If any theme fails validation at build time, the build is rejected. At runtime, invalid configurations surface a warning rather than silently rendering non-compliant colours.

CRITICAL story-typography-contrast-settings-peer-mentor-006 5 pts

Story Points

Critical

Priority

Typography & Contrast Settings

Feature

User Story

As a user

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

Acceptance Criteria

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
Given a user selects the High Contrast theme, when the theme is applied app-wide, then all text, icons, borders, and interactive component states meet or exceed WCAG 2.2 AA minimum contrast ratios in every screen
Given a user selects the Standard theme, when the theme is applied app-wide, then the standard design token colour set also meets WCAG 2.2 AA minimum contrast ratios without requiring the user to switch to High Contrast

Business Value

WCAG 2.2 AA compliance is a legal requirement for applications receiving public funding in Norway, making this a non-negotiable commercial prerequisite for adoption by NHF, Blindeforbundet, and HLF. Automated contrast validation at build time prevents regressions introduced during UI updates or theme changes, reducing the risk of legal liability and the cost of post-release remediation. Runtime validation provides an additional safety net and builds user trust that the app was designed with their specific accessibility needs as a first-class concern, not an afterthought.

Components

Typography & Contrast Settings

Related Feature

Peer Mentor (Likeperson)

User Role