All projects

CHAT APP – ACCESSIBLE MESSAGING

Lab project

A messaging app designed against WCAG from the first screen, with text size and contrast controls built in.

Client
AmaliTech
Service provided
Mobile app
Duration
1 week
Year
2025
Tools
Figma
Platform
Mobile (iOS & Android)
View prototype
Chat app – Accessible messaging: A messaging app designed to WCAG standards from day one

BACKGROUND & CONTEXT

  • Mainstream chat apps hide accessibility in a settings menu, so people with visual, motor or cognitive impairments work around the interface.
  • The brief: a chat app for text and voice messages, images and calls that follows WCAG, rather than adding an 'accessible mode' later.
  • The lab started with documentation: target groups, the challenges each one faces, and rules for colour, type, touch targets and layout.

TARGET USERS

  • Kwame (52, accountant, Accra): presbyopia and arthritis; deciding by how big and how easy to tap

  • Aisha (computer science student, Kigali): blind, uses VoiceOver; deciding by what the screen reader announces

  • Kofi (freelance designer, Kumasi): ADHD and mild dyslexia; deciding by how calm and predictable the screen is

THE GOAL

Make messaging and calling usable without workarounds, by designing to WCAG 2.1 AA as the default state.

MY PROCESS

  1. WCAG review
  2. Personas & mind maps
  3. Accessibility documentation
  4. User flow
  5. Accessible UI (light & dark)
  6. Prototype

KEY DECISIONS

  1. Labels under every tab icon, and the back button always top-left
  2. Touch targets of at least 44 × 44 px, with 8 px between them, and 80 px chat rows
  3. Text size (100%, 125%, 150%) and High Contrast as settings in the app, not only in the phone's OS
  4. Dark mode designed in full, not inverted: every screen has a matching dark version
  5. An 'Unread' tab with a count, so unread messages aren't only a tint

THE SOLUTION

  • Chats: search by name or keyword, All and Unread tabs, large rows with read ticks and message-type icons.
  • Conversation: text, voice notes with waveform and duration, images, and date dividers.
  • Calls: voice and video calls with large, labelled controls.
  • Settings: account options plus an Accessibility section with text size, high contrast and theme switching.

KEY FEATURES

  1. Labelled navigation
  2. 44 px touch targets
  3. In-app text size control
  4. High contrast toggle
  5. Light & dark themes
  6. Voice & video calls

DESIGN SYSTEM & ACCESSIBILITY

  • Rules written before screens: 4.5:1 for body text, 3:1 for large text, 44 × 44 px targets, 16 pt base text, no horizontal scrolling at 200% zoom.
  • An atomic library (atoms, molecules, organisms) in Poppins, with spacing from 2 to 24 and full-round radii for pills.
  • Next round: white on the orange date pills is 2.2:1 and breaks the file's own rule; voice notes need transcripts and calls need captions, as the documentation asks.
View gallery (7 images)Hide gallery
Three personas: Kwame with presbyopia and arthritis, Aisha who is blind, and Kofi with ADHD and dyslexia(opens full size in a new tab)
Three personas from the lab's research, each with a mind map in the file.
Accessibility rules from the project documentation(opens full size in a new tab)
The rules came first; the screens were checked against them.
Chat app user flow from opening the app to chatting, starting a new chat or settings(opens full size in a new tab)
A short, predictable flow: list, conversation, settings.
Chats list in light and dark with All and Unread tabs, and a conversation(opens full size in a new tab)
Large rows, an Unread tab with a count, labels under every tab.
Settings in light and dark with text size and high contrast controls(opens full size in a new tab)
Text size and contrast live inside the app, one tap from settings.
Calls list, ongoing voice call and ongoing video call(opens full size in a new tab)
Calls with large, separated controls.
Contrast checks for the chat app's greys, orange and dark theme(opens full size in a new tab)
Most pairs pass; the orange date pill breaks the project's own rule.

BY THE NUMBERS

Access needs designed for: vision, motor, cognitive
3
Text sizes, set inside the app
3
Themes, both designed in full
2

OUTCOME

  • A short project that shows accessibility working as a baseline rather than a retrofit.
  • A written accessibility spec that the screens can be checked against, line by line.
  • An honest gap list for the next round: transcripts, captions, alt text and the date-pill contrast.

What I learned

Writing the accessibility rules before drawing anything made every later decision faster, and made the one place I broke a rule easy to spot.

View prototype