Designing for accessibility is so much more than simply increasing the font size or using contrasting colors. While these are two pieces of the puzzle, it’s really about bringing a better experience to everyone, regardless of ability, context, or situation.
Here are eight of our favorite designs that embrace accessibility and inclusivity that we found on Dribbble.
The goal of this project was to create two color schemes to accommodate age-related visual impairment and color blindness. Using the Colour Contrast Analyser software, Dejan was able to identify a color palette that exceeds the minimum level of color contrast for visual impairments.
This dashboard shows the status of invoices, indicating which ones have been successfully issued as well as displaying any cancellations or errors. The dashboard features readable typography thanks to large font sizes and high-contrast colors. The icons help to distinguish content for users with cognitive issues. And lastly, instead of using text labels to communicate information, Talita used colors to represent invoice status.
This accessibility toolbar allows users to change the text size and theme of the page as they’re interacting with it (rather than having to navigate to a separate part of the app).
Informazione Facile is an Italian news blog written for those who have communication and comprehension diseases, like aphasia or dementia. The design focuses on a clean interface with strong contrasts and large font sizes.
This transit app shows nearby bus routes based on current location and is targeted toward users with visual impairments. The bus routes are clearly indicated with color and large font sizes, and users can simply drag the bus route screen up or down to see the real-time map.
The majority of homes and apartments in Dubai use DEWA (Dubai Electricity and Water Authority) to receive water and electricity services. This mock-up of the DEWA app is geared toward users with color blindness, especially the most common type of color blindness being Protanopia (the inability to distinguish between red and green hues). This app interface allows users to choose between a green, blue, orange, or black theme.
This interactive error message uses a variety of visual elements to convey information to the user. In addition to text, the exclamation point is used to catch the user’s attention. The red color implies an error and when the error is resolved, the screen turns green to show that it’s been fixed.
This micro-interaction helps identify this button as a clickable object to visually impaired users.
Do you have more awesome examples of accessible design to share with us? Let us know on Twitter: @InVisionApp.
Emily has written for some of the top tech companies, covering everything from creative copywriting to UX design. When she's not writing, she's traveling the world (next stop: Japan!), brewing kombucha, and biking through the Pacific Northwest.