Accessibility Design Token Enforcer
Component Detail
Description
Ensures all UI components consume colour, typography, and spacing values exclusively from the project's design token system. Prevents hard-coded values that could violate contrast ratios or minimum touch targets. Integrates with the Flutter linting pipeline.
accessibility-design-token-enforcer
Summaries
The Accessibility Design Token Enforcer is an automated guardrail that prevents the engineering team from accidentally shipping a product with colour combinations that are unreadable to users with visual impairments, or interactive elements too small for users with motor difficulties. These are not edge cases — WCAG 2.2 AA compliance is a legal requirement in Norway and a baseline expectation for public-facing digital products. Fixing accessibility violations discovered by users post-launch is far more costly than preventing them with automated tooling during development. By enforcing token usage, this component also ensures visual consistency across the entire app, reducing the design debt that accumulates when developers use hardcoded values that diverge from the intended brand.
The Accessibility Design Token Enforcer is a medium-complexity shared linting component that integrates with the Flutter build pipeline via dart_code_metrics configuration. It has no runtime dependencies and no external service calls, so it carries no integration risk. The primary delivery dependency is the design token system being established first — the enforcer cannot validate token usage until the token library exists. Once configured, it runs on every build and PR, which means failing lints can block developer productivity if introduced too late in the project.
The recommended approach is to integrate it in the first sprint alongside the design token setup, accepting an initial remediation pass before enforcing as a build-blocking rule. QA should verify contrast ratio checks and touch target assertions against the WCAG 2.2 AA specification.
The Accessibility Design Token Enforcer exposes `validateTokenUsage(widgetFile)` which performs static analysis on Dart source files, returning a list of `LintResult` objects identifying hardcoded colour, font size, or spacing values. `checkContrastRatio(foreground, background)` implements the WCAG 2.2 relative luminance formula, returning a boolean for the AA threshold. `assertMinimumTouchTarget(widgetSize)` checks both dimensions against the 44×44 dp floor. `generateLintConfig()` produces a dart_code_metrics-compatible configuration map that can be written to `analysis_options.yaml`.
Integration into CI is achieved by running `dart run dart_code_metrics analyze` with the generated config. The enforcer is shared across all UI development, so changes to the token schema must be reflected here to avoid false positives. Custom lint rules are implemented as `DartLintRule` subclasses for compatibility with the standard analyzer plugin system.
Responsibilities
- Lint for hard-coded color values not sourced from design tokens
- Validate that font sizes meet WCAG 2.2 AA minimum requirements
- Assert minimum touch target sizes of 44×44 dp
- Provide custom lint rules as a dart_code_metrics configuration
Interfaces
validateTokenUsage(widgetFile): LintResult[]
checkContrastRatio(foreground, background): boolean
assertMinimumTouchTarget(widgetSize): boolean
generateLintConfig(): Map