Inclusive comics

Accessible Redesign for People with Low Vision

Role & duration

UX Designer

3 Weeks

tools

WCAG 2.1

WAVE

Figma

Sketch

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

Illustration by Natacha Bustos of a person wearing glasses

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.

perceptibility 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

Switch from links to buttons!

Keeps the colorful comic vibe of text over images.

Buttons give 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

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 instead design for a different kind of average.

 

We will all lose sight and hearing capabilities through our lifetime. We can reach more users of varying abilities if we design for fewer capabilities.

Many designers feel darker backgrounds are easier for extended use. As more humans use screens for work and entertainment, 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.

© 2020 by Trishula Oswald

  • White LinkedIn Icon
  • Instagram