Designing for Accessibility: A Case Study in Digital Product Development

Color is the most impactful creative element when it comes to visual design, and experienced designers know that they can use color to improve usability of digital products. Since users intuit much of the visual experience, effective color implementation can not only set the tone emotionally, but also helpfully guide interactions with the product. In our previous post, The Importance of Color in Design, we looked at the basics of color theory. Initial color decisions made up front can set the overall feeling and influence users within seconds of engaging with the product. In this post, we will build upon our knowledge of color theory, and look at some specific ways to use color to improve usability of the interface and positively impact user experience. Use Color To Draw Attention to Key Content Color can be used to clearly communicate and establish the hierarchy of the information presented. By giving prominence to the most important elements, you can lead the user to interact intuitively with the information in a desired order, even after just a quick scan. Introducing high-contrast colors to a product’s design can help signify key content or elements that are important, and draw the user’s eye to that information. High-contrast refers to the difference or range of bright and dark tones between two colors, with the greatest example being white and black. Colors that are across from each other on the color wheel, known as complementary colors, are high in contrast. Analogous colors, such as red and orange, will tend to have a much smaller, more limited range of tones, or low-contrast. Low-contrast colors can sometimes look muddled, and can certainly be more difficult for users to read. Indeed, readability is a vital component of the user experience, so its important to use text with a high-contrast against its background. This very simple example shows the difference between high and low contrast colors. While the low contrast “TEXT” is still readable, the eye is first drawn to the high contrast presentation. Use Color To Improve Accessibility Good design always seeks to create products that can be used by as many people as possible, including those with disability. Accessible design specifically considers users with physical limitations, and results in products that can be enjoyed independently by those users. In the area of color, designers of digital products can expect that they will have some users with common color-blindness or another color vision deficiency. Accessibility practices would have designers implement high-contrast color decisions, as discussed above. But additionally, designers can pair color with visual clues like shapes and fills, using both together to improve usability. In the example below, the icons on the left do not follow accessibility guidelines, because the icons all have the same level of contrast, which is problematic for those who cannot see color difference. The examples on the right show alternate ways in which this UI could be more accessible. In the top example, the biker icon has a higher contrast to show it is selected. The additional examples below have additional UI elements that help denote the difference of selection. Sites like Colorable and Contrast Ratio allow designers to quickly test a range of color pairings for contrast accessibility. Additionally, sites like Vischeck, Colorblind Web Page Filter, and Coblis can show designers how users with different types of color blindness will see a design. Use Color To Influence Decisions Related to contrast, color vibrance is another way that color can impact usability and positively aid users. Bright colors tend draw the user’s attention, and will typically be used on the UI elements most users will want to select, while colors with less vibrance can be used to signal a less common reaction. The example below is a commonly implemented UI/UX pattern. The vibrant purple button stands out more than the color-less gray button. Further, it conveys a “clickable” feeling, while the gray button denotes an almost disabled state. Designers can create intuitive experiences for their users by anticipating their desired actions and making those elements clear with effective vibrance. Of course, making design decisions like this need to be done with care. As we discussed in our post on Dark UX Design, similar choices could be made to trick users into doing something they might not want to do, but which benefit the business in question. Use Color To Improve Usability In summary, color is a powerful asset in the designer’s toolbox, and designers should thoughtfully use color to impact usability. Color sets an emotional tone and guides the user’s eyes as s/he interacts with a digital product. Rightly used, it can make a product more accessible to all users, enabling them to intuitively interact and easily benefit from the product’s features. We’d love to put our expertise in color and design to work for you. Contact us if you have an app idea that you’d like to explore.

App accessibility refers to the concept of building an app in such a way that it is usable by people with the widest possible range of abilities, including those who are living with disabilities. While the ADA’s Web Content Accessibility Guidelines (WCAG) doesn’t have a separate rulebook for mobile apps, it’s still the gold standard for making them accessible. Even from a pragmatic perspective, one billion people, or 15% of the world’s population, experience some form of disability, so overlooking app accessibility reduces your potential user base significantly. What makes an app accessible? The first step in making an app accessible for everyone is creating a clean, intuitive design that users of different abilities can easily navigate. If your interface isn’t easy for people who have no impairments to use, it will be even more of a struggle for people who do.  But we must also consciously design for different types of disabilities. There are various potential impairments to consider, and each will impact how users interact with an app differently. Your user profiles should consider this. Visual For example, visual impairments, ranging from color blindness to low visual acuity and blindness, affect how users perceive an app’s color scheme, font size, and contrast settings, making it difficult to see what the app is displaying. The ability to change the display settings or navigate the app using text-to-speech technology will enable visually impaired users who would not otherwise be able to interact with the app. Hearing Hearing-impaired users need alternatives to audio-only features. Features such as video subtitles, increased volume, and the ability to mute ambient sound help hearing-impaired users interact with an app. Movement Movement impairments may increase the difficulty users experience when interacting with small touch targets. Increasing the touch target size allows tolerance for error and reduces frustration for many users. Alternately, instead of battling the touch screen, some users choose to navigate the app using voice commands. Such users benefit from explicit labeling conventions for user inputs and an intuitive layout to easily command their way through the app. In addition to the design features, clear instructions users can read, watch, or listen to will broaden an app’s reach and allow users to engage in a way that is most useful for them. What does accessibility look like in practice? App accessibility in practice is about including everyone. Advancements in technology are rapidly enabling even more inclusive design. Many apps are being built with features that make them usable by everyone, regardless of ability. This is equally as important as creating specialized apps for people with disabilities. “From mobile banking to staying connected, there are so many essential things you simply can’t do without a phone these days. As designers, we are responsible for ensuring our apps are fully accessible so no one is excluded from these critical aspects of daily life.” —BECCA COLLINS, UI/UX DESIGNER, INSPIRINGAPPS Example: Empath We improved visual accessibility for users of the Empath app, an app built to enable people to share their feelings in a safe environment. Empath features a feed where users post and read updates about how others are doing. The initial build of the app was not dynamic, and all users were forced to read the smaller fonts typically displayed. To broaden app accessibility, we implemented Apple’s Dynamic Type in critical parts of the app. Dynamic Type allows users to indicate their preferred reading size (within a range). Apps that support Dynamic Type then adjust to the preferred reading size automatically. This feature benefits people with disabilities and those who require larger print as they age. Adding Dynamic Type was not simply a developer effort but also a design one—our designers had to consider ways other elements on the screen would dynamically change so that the app looked beautiful and functioned well, regardless of what size type was employed. Example: My Meals My Way Good Nutrition Ideas collaborated with InspiringApps to develop the My Meals My Way mobile app, which simplifies meal planning for individuals with disabilities and older adults. Users can create unique profiles, build meals based on their needs, and share both meals and shopping lists with caregivers. The app strongly emphasizes accessibility in several ways, including: Profile building based on the user’s dietary and eating needs Ensuring high color contrast Providing text descriptions and captions for images Embedded app tutorial videos with voiceover and captions Accessibility labeling of interactive elements to support Voice Control navigation Dynamic Type compatible fonts and scalable UI elements that give users the ability to set preferred reading sizes Offering an intuitive user experience with clear directions and consistent design throughout the platform Building an inclusive experience was our goal. Accessibility audits, user feedback, and best practices guided every decision in content, design, and development. What resources exist to develop accessible apps? Making your app accessible doesn’t have to be expensive or time-consuming. Here are some free resources to streamline the process and ensure you reach the widest possible audience. POUR Principles The Web Content Accessibility Guidelines (WCAG) are an international set of guidelines developed by the World Wide Web Consortium (W3C), the web’s governing body. These guidelines, which form the basis of most web accessibility laws worldwide, are based on the “POUR” principles: Perceivable, Operable, Understandable, and Robust. The POUR principles make it easy to remember the guidelines for creating an accessible app: Perceivable: Information should be presented in multiple ways, such as providing text descriptions for images, using captions, and ensuring good color contrast. Operable: Users should have the ability to navigate and interact with the app using various methods. Think clear structure, descriptive links, and keyboard accessibility. Understandable: The app’s interface and content should be easy to comprehend. In other words, provide clear instructions, consistent design, and plain language. Robust: The app must support various assistive technologies and user needs by including descriptive metadata and conducting accessibility testing. The Web Accessibility Initiative (WAI) provides extensive information on accessibility best practices and guidelines, including a free course on making digital technology accessible and detailed documentation on mobile accessibility mapping. Apple & Google Accessibility Standards Both iOS and Android also offer complete accessibility guidelines, as well as several phone-based features for mobile developers to employ. Some highlights: Apple’s VoiceOver. Developers can integrate VoiceOver in an app to change how the system interprets taps and swipes, augmenting usability for the visually impaired. The Accessibility Inspector for iOS runs through the app to find common accessibility issues and provides a live preview of all accessibility elements within the app. Google’s TalkBack is a built-in screen reader for Android devices. When TalkBack is on, users can interact with their devices without seeing the screen. Switch Access from Google lets motor-impaired users interact with Android devices using a switch (like an external keyboard or buttons) instead of the touch screen. Beyond what we’ve mentioned, there is a whole world of features that can make your app truly inclusive. The good news is that new tools are constantly emerging to empower even more users. Accessibility Benefits Everyone The benefits of accessibility extend far beyond those with disabilities. Consider these everyday situations: Busy morning commute? Voice commands let users navigate hands-free. In a noisy environment? Subtitles ensure users don’t miss a beat. Is sunshine making your screen glare? Increased font size offers a comfortable reading experience. The truth is that features designed for accessibility make your app more user-friendly for everyone. This translates to a wider audience, a better user experience, and a more successful app. The more people who can easily access, navigate, and engage with an app, the more successful it will be. Ready to make your app accessible? We’re here to help! Contact us to discuss how to easily integrate accessibility features into your app.