Inclusivity and Accessibility in UI/UX Design

Tuesday, September 28, 2021

As designers, especially those in the UX/UI realm we know the importance of creating with a brands target audience in mind. We create personas and pour details into what we know would meld well with the ideal customer. Every decision is made with that user in mind, but what about the users that don’t fit that mold?

If you are designing a digital experience that excludes groups of people, it’s likely going to marginalize your consumer base. While it is important to make sure the design appeals to your ideal consumer, engagement is also important and limiting the number of people who can access your work can hurt your numbers as well.

Here’s a 3 things to consider when creating a website, app, or other digital experience.

1. Gender Inclusivity

Today gender expression is a fluid construct, we no long live in a binary world, so we should be sure our designs reflect that.

Color Choice

Keep in mind what colors you choose will have an impact on how users will interpret the brand. Leaning too far into the stereotypically gendered colors may drive away potential users.

Onboarding or Registration Questions

Most apps require some form of registration and/or onboarding question to collect data about their users. Many times, this include questions related to gender. While at times it may be necessary for platforms tied to Health Information to ask gender related questions, most times the question can be shipped completely to avoid any friction. In times when gender specific data is necessary, consider leaving it as a text field instead of giving options in a selection dropdown, or including extensive options like “transgender”, “intersex”, “non-binary”, and “prefer not to say”. Avoid including an “other” option because it inherently makes someone feel like they do not belong.  

If you must ask for a user’s gender, consider also asking for their gender identity as well. That way if someone doesn’t feel their assigned gender represents them correctly, they have the space to make it known.

Legal Name vs Nickname

Similarly to gender specific questions, you can alienate some users by requiring they enter their legal name. Apps related to health or money that require sensitive information may require someone enter a name that was given at birth for legal purposes, but that name could cause a painful experience for them if you use it throughout the platform or in your communication efforts.

For example, imagine someone’s given name was Matt, but they are in the process of transitioning and now prefer to be called Martha. Every time they read an email addressed to Matt from your brand or see their legal name on the dashboard of your app, it could be a triggering experience. Consider adding a field for users to enter their preferred name, when a legal name is required.

2. Accessibility for Visually Impaired

There are many other factors that are involved in inclusive design like taking in considerate of possible user disabilities like color blindness, visually impaired users, and potential issues with sizing for older generations with deteriorating eyesight.

Contrast Compliance

Using high contrasting colors and patterns is a simple, yet effective way to make sure your designs are accessibility to visual impaired users. The better contrast, the easier the readably of content, especially text. Making sure your content is legible is key to user engagement, this will also help improve analytics in website design as well. If you are wondering if your colors are compliance to accessibility guidelines you can use tools like to easily check contrasting colors.

Magnification Ability

While it is important to use fonts and graphic styles that are a good size for readability of all users, it’s not always possible to create large enough graphics for older users. Consider including the ability for users to magnify content. This is already possible in most browser platforms like Google and Safari, but don’t forget how valuable a tool like this can be for older users in mobile apps as well.

Non-Text Descriptors (Like Images or Icons)

Be sure to always include alternative text for things like images and icons. If a blind user is accessing your content from a screen-reader including descriptive captions can help you be sure that everyone can enjoy your imagery, not just those who can see it.

3. Accessibly for HOH, Deaf, and Speakers of Other Languages.

Hard of hearing, deaf, and non-native speakers may also be viewing your work so don’t leave them out either.

Closed Captions

If your platform includes any video element, it’s important to include a closed caption option to give users the option to access it without sound. This is helpful not only for HOH, and Deaf users but also for users who don’t have access to sound on their device, or even just don’t want to have the sounds on.

Language Settings

Depending on the demographic you are trying to reach, you may have designed with the intention of users only needing one language. But if you intend on expanding your reach to users outside of your targeted language speakers consider a setting to change the language. This is not something many people consider, but if you want your website or app to be displayed in multiple languages the text formatting will have to be flexible to fit varying character widths, and work with languages that are read both left to right like English and Spanish, and right to left like Arabic and Hebrew.

Being inclusive in design doesn’t have to be complicated. While there are many things to consider the most important thing to remember is everyone has a different perspective and challenge. What you don’t think twice about, maybe cause issue for users with a different experience than you. Always include people with diverse backgrounds in the design, review processes and remember to be empathetic in your practices. Inclusion of empathy in design is key to creating a successfully digital design.

Interested in chatting more with us about UI/UX design? Contact us at

Posted on:

September 28, 2021




Latest Post

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
AI-Powered Design: Enhancing Efficiency and Creativity

In today’s blog, we'll dive into our go-to AI tools that have become indispensable in our daily workflow, from enhancing photos with Photoshop AI Generative Fill to revolutionizing project management with Dropbox Dash, Loom AI, and Zoom AI assistants.

A Roadmap to Creating a Meaningful Style Guide

Use this guide to create a cohesive and impactful identity for your software, app, or website.

How FemTech Has Shifted Modern Prenatal and Postpartum Care

In today’s blog, we’re going to explore how the digital landscape has changed the prenatal and postpartum narrative from baby’s health to mom’s health — because let’s be honest — mom’s health has a direct relationship to baby’s health during the conception, prenatal and postpartum periods.