Context and disclaimer:

Inclusive design is essential where accessibility, usability, and trust directly impact a diverse range of users with different abilities. However, in fast-paced agile environments, where teams often move quickly from ideation to high-fidelity designs under tight deadlines, inclusivity can sometimes become an afterthought.

This handbook ensures that inclusivity is embedded into every stage of the design process, even when time is limited. It provides practical and actionable guidelines that fit seamlessly into an agile workflow, helping UX designers make informed, user-centered decisions without slowing down development. By following this handbook, designers can create digital experiences that are accessible, equitable, and user-friendly for everyone.

How to Use This Handbook

This handbook is structured to provide quick, actionable insights that can be applied at different stages of the design process, without disrupting the fast-moving nature of agile development.

1. Quick Reference for Best Practices – Each section includes bite-sized guidelines on accessibility, inclusive wording, and design patterns optimized for diverse users.
2. Agile-Friendly Implementation – Since you operates in an agile environment, the handbook is designed for efficiency. You’ll find checklists and heuristics to help you integrate inclusivity into high-fidelity designs without major rework.
3. Check to do list: Each section of this handbook includes checklists that you can use while designing to ensure your work meets inclusive design principles. ****These checklists act as a quick audit tool, helping you assess the accessibility of the interface.

By integrating these principles into our daily work, we can ensure that your products are welcoming, intuitive, and accessible to all users—regardless of ability, language, or financial background.

1. Color Contrast

Step 1: Distinguish the elements which requires color contrast:

• Ask yourself: whether this UI element is information bearing? i.e. Does it convey any message that users would need to know to make actions? Without it, would the users be able to complete the task required?
  • Information bearing elements: text (and different states); standalone icons; images of text (should be avoided)
  • Decorative & disabled elements: no color contrast requirements

Step 2: Use Figma plugin (Stark) to check the color contrast on the elements AS designing

• For text and standalone icons: > 4.5: 1