top of page

Inclusive comics

Accessible redesign for people with low vision

Role & duration

UX Designer

3 Weeks


WCAG 2.1





Accessibility Evaluation

UI Design

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

Ariell, Amalgam's owner, featured on the cover of Invincible Iron Man
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

original amalgam.png

Close up of body text

4.13 Original Contrast.png

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.


Comicbook characters Shuri and Groot

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

Mockup of the home page that prioritizes a strong color cotrast between the font and background

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.

Close up of call to acion button over the hero imge

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.


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.

bottom of page