Inclusive comics
Accessible redesign for people with low vision
Role & duration
UX Designer
3 Weeks
methods
Accessibility Evaluation
UI Design
Hi Fidelity Prototype
Overview
Amalgam Comics and Coffeehouse:
-
First black, woman owned comic book shop
-
Supports an inclusive nerd culture
-
Celebrates creators and characters of color
-
Responsive e-commerce site features generous use of ARIA Landmarks
User analysis
World Health Organization estimates that 217 million people experience moderate to severe vision impairment.
People who experience low vision might rely on their own vision and not screen-readers to navigate websites.
Perceptibly evaluation
The color contrast ratio between text and background is below WCAG recommended ratio of 4.5:1.
Original Home Page
Close up of body text
Color contrast ratio of Blue #517FB9 and White #FFFFFF is 4.13
The low color contrast of the hover state makes navigation very challenging for people who experience low vision.
Color contrast drops below 2:1 where white text is over a grey background. This is challenging for those who use the footer as a last resort to navigate the site.
Opportunity
Customers experiencing low vision do have accessibility needs that are not yet addressed with Amalgam’s current design.
If we implement Web Content Accessibility Guidelines for customers who experience low vision, the product will not only welcome, but empower people to shop Amalgam’s catalogue. Amalgam will spread the world of inclusive geekdom.
Solution
-
High contrast colors for typeface, background, hover states and focus states
-
Raise hierarchy of navigation links
-
Tag page content as <nav>, <h1>, <main>, and <footer>
-
Replace carousel with static images
High Fidelity Mockup of Accessible Redesign
High contrast colors and larger typeface
I took inspiration from the color scheme in Amalgam's cafe. Brightly colored tables are emblazoned with Marvel and DC Superheroes like Deadpool, Spiderman and Batman. Use of bright primary colors, blue, red, yellow and black against white backgrounds pass the contrast guidelines and mirror that comic book vibe of Amalgam's physical store.
Switch from links to buttons!
By implementing buttons instead of links, this design evokes the colorful comic vibe of text over images.
Buttons allow a solid background for text, an opportunity to contrast the background with the text colors.
Navigation hierarchy
Top navigation
Easy to view, easy to tab through.
Relocating all navigation links to the top of the page elevates the hierarchy of these options.
This allows people who use the tab button to navigate the site to quickly identify what they can access on Amalgam's website.
Footer navigation
I know, "No one looks at the footer," but
I like a good footer.
Check out that contrast ratio of 17.22!
People who have difficulty finding what they're seeking on the main page will look for answers in the footer.
This design groups links in scannable pieces with a strong contrast. A frustrated or confused user is relieved to easily locate and navigate through the site from this footer.
Reflection
We can reach more users of varying abilities if we design for fewer capabilities.
We all lose capabilities through our lifetime.
Designing interfaces for the "average person," frequently has the unintended effect of excluding many people who may experience the world in a particular way, particularly if that experience seems limited to "average" people.
Accessible design shifts our perspective to design for a different kind of average.
Many designers feel darker backgrounds are easier for extended use. As more humans use screens stay connected, Dark UI patterns have gained popularity.
I'd like to explore if low vision users, in fact, prefer Dark UI patterns and what a that would look like for the next iteration of Amalgam Comics.