Accessible Redesign for People with Low Vision
Role & duration
Hi Fidelity Prototype
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
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.
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.
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.
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.
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.
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.
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.