Accessibility & Design Principles
Naluma’s accessibility requirements go beyond standard WCAG guidelines. The audience has a condition that affects attention, sleep, emotional regulation, and — critically — their relationship with sound. Every design decision must account for a user who is anxious, attention-depleted, and potentially hypervigilant about sensory input.
Tinnitus-Specific Principles
Section titled “Tinnitus-Specific Principles”These eight principles are derived from the Brand Personality Spectrum and the therapeutic research that underpins the product. They are not optional guidelines — they are constraints that every screen, interaction, and audio decision must satisfy.
1. No Sharp Visual Transitions
Section titled “1. No Sharp Visual Transitions”The target user is in a state of heightened alertness. Abrupt visual changes — hard cuts between screens, flash animations, sudden layout shifts — trigger the same startle response that sharp sounds do. Every transition should use the settle easing curve (600ms cubic-bezier(0.16, 1, 0.3, 1)) or, for micro-interactions, the standard ease (150--400ms ease).
In practice:
- No instant page transitions
- No bouncy or spring animations
- Loading states should feel like calm stillness, not urgent waiting
- Avoid sudden brightness changes, especially in sleep/nocturnal contexts
2. Generous Spacing
Section titled “2. Generous Spacing”The user’s attentional resources are depleted. Cramped layouts amplify the feeling that there is too much to deal with. The spacing scale runs up to 120px for a reason — page-level vertical rhythm should use large spacing values (spacing.64—spacing.120) to give the eye room to rest.
In practice:
- One idea per view, one action per moment
- Minimum
spacing.24between form fields - Minimum
spacing.16between cards - Content-to-space ratio should skew toward space
3. Warm, Not Cool
Section titled “3. Warm, Not Cool”The tinnitus app category is saturated with clinical blues and meditation teals. Naluma’s warm palette (see Colors) communicates that this is a human experience being met by a human response, not a medical condition being managed by software. Cool colors read as clinical; warm colors read as safe.
In practice:
- The primary background is warm-white (
#FBFAF1), not pure white - Dark mode uses warm-charcoal (
#2A2220), not pure black - Accent colors stay in the warm earth-tone range
- No blue-light-heavy whites in sleep/nocturnal contexts
4. Sound as Texture, Not Event
Section titled “4. Sound as Texture, Not Event”This principle is detailed in the Sonic Identity documentation. In summary: every sound the app produces should feel like part of the acoustic environment rather than a discrete event demanding attention.
In practice:
- All sounds have slow attack and slow release envelopes
- Default volumes are low; volume controls are prominent and granular
- No auto-play audio at any point
- UI feedback sounds are off by default (prefer haptic)
5. User Controls the Acoustic Environment
Section titled “5. User Controls the Acoustic Environment”A tinnitus patient’s defining experience is a sound they cannot turn off. Naluma must never replicate that experience. Every sound the app produces must be optional, adjustable, and predictable.
In practice:
- All audio features have visible on/off controls
- Volume is independently adjustable for voice and background audio
- No surprise sounds — the user always knows what will happen before tapping
- Sound enrichment is positioned as “enrichment” or “texture,” never “masking”
6. WCAG AA Minimum Contrast
Section titled “6. WCAG AA Minimum Contrast”All text must meet WCAG AA contrast requirements as a baseline.
| Context | Minimum ratio |
|---|---|
| Normal text (< 18px or < 14px bold) | 4.5:1 |
| Large text (>= 18px or >= 14px bold) | 3:1 |
| UI components and graphical objects | 3:1 |
The warm palette has been tested for these ratios. Key pairings:
| Foreground | Background | Ratio | Passes |
|---|---|---|---|
warm-dark (#3D2E2A) | warm-white (#FBFAF1) | ~11.5:1 | AA, AAA |
muted-brown (#7A6560) | warm-white (#FBFAF1) | ~4.5:1 | AA |
white (#FFFFFF) | burnt-sienna-deep (#A55838) | ~4.6:1 | AA |
warm-white (#FBFAF1) | warm-charcoal (#2A2220) | ~11.9:1 | AA, AAA |
dim-brown (#B09A90) | warm-charcoal (#2A2220) | ~4.7:1 | AA |
7. 44px Minimum Touch Targets
Section titled “7. 44px Minimum Touch Targets”All interactive elements in the app must have a minimum touch target of 44x44 pixels. This is enforced in the button component tokens via min-height: 44px on all app size variants.
In practice:
- Buttons:
min-height: 44pxon all sizes (evensm) - Tappable list items: minimum 44px row height
- Icon buttons: 44px tap area even if the visible icon is smaller (use padding)
- Spacing between adjacent tap targets: minimum
spacing.8(8px) to prevent accidental taps
This is especially important for the 40+ demographic that represents a significant portion of tinnitus patients, who may have reduced fine motor precision.
8. Frequency Safety Guidelines
Section titled “8. Frequency Safety Guidelines”Any audio the app produces must respect tinnitus-safe frequency ranges. These guidelines are detailed in Sonic Identity and summarized here:
| Frequency Range | Guidance |
|---|---|
| Below 250 Hz | Generally safe |
| 250 Hz — 2 kHz | Safe zone for brand/UI audio |
| 2 kHz — 4 kHz | Caution — use only in broadband context |
| 4 kHz — 8 kHz | Avoid concentrated energy (most common tinnitus range) |
| Above 8 kHz | Avoid in discrete sounds |
Critical anti-patterns:
- No tonal notification sounds in the 3—8 kHz range
- No ASMR-style whisper content (high sibilance energy at 4—8 kHz)
- No sudden silence after sound (creates perceptual rebound)
- No binaural beats without explicit opt-in and disclosure
Standard Accessibility Requirements
Section titled “Standard Accessibility Requirements”Beyond the tinnitus-specific principles, Naluma must meet standard accessibility requirements:
Screen Reader Support
Section titled “Screen Reader Support”- All interactive elements must have accessible labels
- Images must have descriptive alt text (or be marked decorative)
- Navigation must be operable via screen reader gestures
- Dynamic content changes must be announced via live regions
Keyboard Navigation (Web)
Section titled “Keyboard Navigation (Web)”- All interactive elements must be reachable via Tab key
- Focus order must follow visual layout
- Focus indicators must be visible (using
semantic.color.focus.ring) - No keyboard traps
Reduced Motion
Section titled “Reduced Motion”- Respect
prefers-reduced-motionmedia query on web - Provide a “reduce motion” setting in the app
- When reduced motion is active, replace all animations with instant transitions (no duration, no easing)
Text Scaling
Section titled “Text Scaling”- The app must support system text scaling up to 200% without layout breakage
- Do not use fixed heights on text containers
- Test all screens at the largest system text size
Testing Checklist
Section titled “Testing Checklist”Before shipping any screen or feature:
- All text meets WCAG AA contrast ratios against its background
- All touch targets are >= 44px
- No auto-playing audio
- All audio is optional and adjustable
- Transitions use
settleor standard easing (no bouncy/spring) - Screen reader can navigate and operate all interactive elements
- Layout holds at 200% text scaling
- No audio content has concentrated energy in the 4—8 kHz range
- Dark mode maintains the same warm undertone (no pure black)
- Spacing between adjacent interactive elements is >= 8px