Colorblind simulation

Normal Vision

Red-Blind/Protanomaly

Green-Blind/Deuteranopia

Blue-Blind/Tritanopia

Red-Weak/Protanomaly

Green-Weak/Deuteranomaly

Blue-Weak/Tritanomaly

Monochromacy/Achromatops

Blue Cone Monochromacy

Perfect Pies Web Layout Evaluation (colorblind simulation)

My prototype webpage, Perfect Pies was designed with a minimal range of color. I pulled the blue out of the banner image and utilized various weights for types and objects. The blue is set against a plain grey background also pulled from the image. The only other color is the brown of the rolling pin.

The original page hierarchy is based upon the banner, navigation options and lastly, the content. The brown rolling pin draws the user’s attention as the only color other than the primary scheme of blue/gray. Therefore color drives the user to the banner first and completes the introduction with title and tagline.

The next level of hierarchy is the navigation bar (and sub-navigation). The strongest color used on the page is the background for the navigation bar which draws the eyes from the banner to the navigation options set in white text and against a dark blue. The sub-navigation bar is a lighter shade of blue with a darker text which creates a connection with the main bar while receding into a secondary role.

Finally the content is set within a neutral gray tone with dark blue text. The appearance is lighter, less commanding and therefore at the bottom of the color-driven page hierarchy.

In evaluating the webpage through color blind simulators, I was surprised at the level of retention of page hierarchy with most filters. The brown rolling pin may have changed tone but still stood out due to its uniqueness in all the filters but the Monochromacy/Achromatops . Though the color of the navigation bar was altered, the weight of the color (no longer blue but green or purple) assisted with direction of the users view from main to sub-navigation. The content section retains its place as last in the hierarchy due to its overall light, neutral appearance.

Perfect Pies may not look as appealing with colorblindness but is still accessible and usable with a clear and simple page hierarchy.