Accessibility Design System
Component Detail
Description
A shared design token system that enforces WCAG 2.2 AA compliance at the component level. It encapsulates color tokens with guaranteed contrast ratios (4.5:1 for body text, 3:1 for large text and UI components), scalable typography up to 200%, minimum touch target sizing (24x24 CSS pixels), visible focus indicators, and consistent spacing/radii tokens that all other UI components consume.
accessibility-design-system
Responsibilities
- Enforce minimum contrast ratios for all color tokens
- Provide scalable typography tokens up to 200% zoom
- Define minimum touch target sizes for all interactive elements
- Supply visible focus indicator styles for keyboard navigation
- Expose semantic spacing, radii, and sizing tokens for consistent layout
Interfaces
getColorToken(name)
getTypographyScale(baseSize, scaleFactor)
getMinimumTouchTarget()
getFocusIndicatorStyle()
getSpacingToken(size)
getRadiusToken(size)
validateContrastRatio(foreground, background)
getAccessibleTextStyle(variant)
getIconSize(context)
Relationships
Dependents (3)
Components that depend on this component
Sub-Components (2)
A Flutter widget wrapper that ensures all interactive elements meet the WCAG 2.2 minimum touch target size of 24x24 CSS pixels regardless of the visual size of the contained widget.
- Enforce minimum 24x24 CSS pixel hit area on all interactive children
- Preserve visual appearance while expanding touch area
Defines all application color tokens pre-validated against WCAG 2.2 AA contrast requirements. Provides both light and dark mode variants with guaranteed compliance.
- Maintain pre-validated color pairs for all UI surfaces
- Provide contrast-safe color lookup for text on any background
- Support dark and light mode with verified contrast ratios