top of page

Although I began driving earlier, I only started logging data in October 2024. For this project, I have used a focused slice of that data: trips from November 2022 to March 2025. This decision allowed me to balance meaningful insights with time constraints. More than that, it gave me a way to pause and look back before deciding how to move forward.

Designing for Accessibility

Building Inclusive Interfaces with WCAG 2.1 AA Standards

Disclaimer

Due to NDA restrictions, specific visual details and product references have been omitted. This case study focuses solely on the accessibility strategy and design methodology, ensuring that all the designs conform to the WCAG Accessibility standards.

WCAG.jpg

Impact at a Glance

  • Created a fully WCAG 2.1 AA complaint design system for mobile and web.

​​

  • Improved usability for users relying on assistive tech like screen readers and keyboard navigation.

​​

  • Enabled consistent handoff for development teams through documented components and patterns.

Introduction

As the UI Designer on this project, I was tasked with designing a user interface that not only looked clean and modern, but also met accessibility standards from the ground up. The product needed to be usable by a wide range of users, including those with vision impairments or motor limitations. Designing for accessibility wasn’t just an add-on, it was part of the foundation. applied the POUR framework to guide key decisions, making sure the interface was perceivable, operable, understandable, and robust from the earliest stages.

Eye icon representing the Perceivable principle of accessibility

Perceivable

Hand icon representing the Operable principle of accessibility

Operable

Head icon representing the Understandable principle of accessibility

Understandable

An arrow hitting the bullseye, representing the Robust principle of accessibility

Robust

Accessibility Goals

The goal was to align every design decision with WCAG 2.1 AA standards, ensuring accessibility across both mobile and desktop platforms. This included:
 
Color Contrast Requirements
Minimum 4.5:1 for text, 3:1 for large text and graphics.

Scalable Typography
Type systems that maintain readability and visual hierarchy at multiple screen sizes and zoom levels.

Touch Targets
Minimum size of 44x44px to support users with limited dexterity.

Keyboard Navigation
Logical tab ordering, focus rings, and keyboard-accessible components.

Focus States
Clear, visible focus indicators for all interactive elements.

Color Library

Image 1.jpg

Button Library

Image 2.jpg

Design Process and Tools

Color & Contrast Testing
Color palettes were carefully selected to maintain visual clarity while passing contrast checks. Every interactive element, buttons, links, icons was tested using plugins like Stark to meet contrast ratios.

Typography Hierarchy
Fonts were scaled using consistent spacing ratios with 1.5× line height. Paragraph and letter spacing followed WCAG’s text spacing guidelines to enhance legibility.

Accessible Components
Reusable components like buttons, inputs, dropdowns, and modals were created with accessible states (default, hover, focus, disabled) built in from the start.

Touch Target Sizing
All interactive elements were checked for minimum touch area, ensuring a comfortable experience on both mobile and desktop.

Plugins and Tools Used​
​
Stark: For color contrast checks and focus ring testing.

Able: To simulate screen reader and keyboard interactions.

Figma: Built-in constraints for responsive behavior.

Accessibility Tools

Image 3.jpg

Challenges and Considerations

Balancing Contrast and Brand Colors
Ensuring enough contrast while still staying close to the intended visual style was a recurring challenge.

Scrollable Overlays and Modals
Designing accessible scrollable areas within overlays required specific attention to keyboard trapping and focus retention.

Keyboard Navigation and Tab Order
Interactive flows had to be tested for logical tab order and visible focus states, especially on modals and multistep screens.

Responsive Behavior
Making sure every component worked across screen sizes and zoom levels, without losing functionality or layout structure.

Keyboard Navigation

Outcome and Impact

  • Developed a reuseable WCAG complaint component library.

​​

  • Created a consistent and scalable style system for mobile and desktop.

 

  • Improved clarity and usability across the platform for all users.

Learnings and Reflection

This project introduced me to the real-world challenges of designing accessible products. I learned that accessibility is not just a checklist, it is about clarity and inclusivity. The most challenging part was finding the balance between maintaining a strong visual style and ensuring the interface remained usable for everyone.

It was also a valuable learning experience in understanding the limitations of aiming for AAA-level compliance, which is often aspirational and not feasible across entire products due to strict contrast and cognitive clarity requirements.

bottom of page