Accessibility
Accessibility is a core principle of the muba design system, not an afterthought. Muba is used in degraded conditions: bright gym lighting, physical fatigue between sets, sweaty hands, 90 second rest windows where speed matters. Designing for accessibility in this context is not about compliance checklists. It is about making the app genuinely usable for everyone, in every condition.
This page defines the compliance target, the concrete rules that apply across the entire system, and how accessibility is integrated directly into tokens and components as a built in constraint.
Target compliance level
WCAG 2.1 AA is the target for all components and screens in the muba design system. This is the baseline, not the ceiling. In gym context flows (active workout, set logging), the system exceeds AA requirements for touch targets and contrast.
Touch target sizes
Enhanced (gym context) : 48x48px
In workout flows where motor precision drops: large buttons (58px), input fields (48px), footer action buttons (48px), set table fields (44x44px minimum).
Invisible padding. When a visual element is smaller than the touch target minimum, the component uses invisible padding to expand the tappable area without changing the visual size. This is documented in the help button (26px visual, 44px+ tap area), small chips (32px visual, 44px tap area), checkbox controls, radio controls, and badge dismiss buttons.
At the component level
Every component page includes an Accessibility section covering: touch target compliance, focus indicator behavior, keyboard interaction pattern, screen reader announcements, color independence verification, and dynamic type adaptation.
Accessibility checklist (per component)
When documenting a new component, verify:
Contrast ratios for all text/background and icon/background pairings
Touch target at least 44x44px (or justified exception with invisible padding)
Visible focus indicator using the semantic focus ring tokens
All states communicated beyond color alone (icon shape, text, position)
Specific considerations
Bright lighting. Gyms use intense overhead fluorescent or LED lighting that creates screen glare. High contrast text (primary text at #090808 on white) and thick borders (3px on key containers) ensure readability. The warm Dune neutral palette avoids the cool grays that wash out under warm artificial lighting.
Physical fatigue. Between heavy sets, users experience reduced motor precision, trembling hands, and impaired fine motor control. Touch targets in workout flows are 48px+ and full width buttons are used for primary actions. No precision gestures (pinch, long press, small tap targets) are required during active workouts.
Sweaty hands. Wet screens reduce touch accuracy. Generous tap areas on all interactive elements, full row tappability on checkbox/radio/toggle components, and the absence of swipe gestures for critical actions mitigate this.
Quick glances. Users read the screen for 1 to 2 seconds during rest periods. Workout data (weights, reps, rest timers) must be readable at arm's length. The content/body/strong style (Inter Bold 16px) is used for all critical data values, and the progress bar's percentage readout uses the note/accent style (Inter Medium 14px) for secondary data.
Offline context. Accessibility features (focus rings, ARIA roles, touch targets, contrast) work independently of network connectivity. No accessibility feature depends on a server response.