Background

Pinterest Feature

Like many others I have a deep love for Pinterest as it is such a great source of artistic inspiration. This app is the first place I turn to when starting any project. Pinterest is at the forefront of inclusivity for social media platforms. One feature they recently implemented, that I was blown away by, was a skin tone range feature. This feature lets users see results that are filtered by shades they select. This made the app more equitable and personable.

Pinterest could continue this style of inclusivity to other aspects. When searching for color-related inspiration, it would be great if Pinterest included a feature that allows users with specific visual impairments to search for images based on the colors they can see clearly, while avoiding those they cannot.

My art created with inspiration from Pinterest and other sources.

Feature

The new feature will be located in the top bar that contains bubbles for suggestions just as the skin one does. When clicked on, it will pull up a menu that allows the user to customize and filter their results.

A user can filter for results that are red, green color blind friendly and blue, yellow colorblind friendly. In addition to this they can turn on high contrast mode which raises the contrast of the entire app and shows results that have the highest contrast. Another aspect they can change is the font. Here they can change all text on the app to the dyslexic font or to a larger font. The final option they have is the ability to turn off anything that has a strobing effect to it and freeze any flashes. This feature was created for users who have epilepsy as these effects can be harmful to them and trigger seizures

Color Accessibility Popup: Dark and Light Mode

Code

After creating and polishing my original idea and design I went into python to code a basic protype. Here I included the basic features in my design. While doing this I kept in mind important design principals.

Human Computer Interaction Principals

First when doing the screen reader section, I followed the ideas of anthropomorphism by trying to make the screen reader's speech match that of a human. I did this by including natural pauses between sections. To achieve this, I put a period after each option available to the user to mimic how a human would read off the options, pausing in between each to signal to the listener that they are separate and therefore separate options. I also made sure the tone and speed of the speech being read were natural to a human—not too slow and not too fast, not too loud and not too quiet.

When doing the color contrast checker sections I followed the Web Content Accessibility Guidelines (WCAG) regarding the contrast needed. Although there is no perfect ratio, it states that we should strive for a minimum of 4.5, but 7 is better and preferred. The three levels of WCAG conformance are A, AA, and AAA. They are used to rank conformance to guidelines. These ratios both receive a AAA, the best possible result, as they have the highest level of conformance and are exceptionally accessible. They meet the minimum contrast ratio for text to background at 7:1 (Accessibility Color Alone as Meaning). I used W3Schools to learn about WCAG and get the WCAG values.

Finally while doing the prototype section, I used the Aesthetic-Usability Effect by creating an aesthetic design so the user will perceive the feature as easier to use. I used a harmonious color palette to create a balanced design. I made sure the elements were evenly distributed. Subheadings were indented to differentiate them from the content and bolded. The main title was also bolded, centered, and enlarged to keep the user informed on where they are in the interface. Similar elements are grouped together to make it easy for the user to orient themselves to where features would be. The contrast between the elements chosen is very high, highlighting the bold design.