Apple.com - Color blindness Accessibility Study
UX Research / UI Design - Figma / Adobe Color / Adobe Photoshop / Adobe Express - 5 weeksAs a pioneer in the technological realm, Apple is no stranger to the web. As 8% of males and .5% of females are color blind worldwide, both color blind and Apple users have respective large populations. Largely popular with “digital natives”, I desired to understand Gen Z and Millennial’s perception of color blind accessibility within Apple.com. Utilizing WCAG guidelines, color theory, and accessibility validation technology, I uncovered points of user concern and confidence. I explored the discovered intricacies to redesign the features of highest concern - the most urgent of which were to my surprise.
Color blind users may benefit from enhanced accessibility to improve their user experience while browsing the Apple.com website.
The accessibility audit - what are the concerns?
I sought out to develop my hypothesis through conducting an in-depth accessibility audit. I evaluated the website utilizing Web Content Accessibility Guidelines (WCAG) produced by the World Wide Web Consortium (W3C), an organization recognized globally for developing international accessibility web standards. I focused specifically on the WCAG 2.1 Success Criterion’s (SC) of Use of Color (SC 1.4.1) and Contrast Minimum (SC 1.4.3), encouraging websites to avoid color based information with no other indicators, include larger text with a wider stroke, and amplify the contrast between foreground and background.
But there was a problem…I am not color blind. So what could I do with this? Were these concerns worth pursuing?
To account for this challenge, I utilized Google Chrome extensions to debate the merit of my hypothesized concerns. As a non-color blind researcher, I simulated the experience of color blindness through the extension Silktide, which additionally possessed a color contrast validator. In order to evaluate WCAG criterion of the text’s weight, color, and typeface, I utilized the extension WhatFont to inform my decisions around how much of a concern text size was.
Accessibility extention example
Catastrophic error of failed color contrast. Small 9pt (12px) text size is below recommended 12pt minimum.
Upon accessibility audit completion, I hypothesized that color blind accessibility may be of potential concern due to poor color contrast, color dependent information, and small text size.
Meet the users: Gen Z and Millenials
It was time to breathe life into the research.
I was able to recruit four individuals - three Gen Z users and one Millennial user - through networking on Instagram. Accounting for color blindness type, demographics, browsing habits, and e-commerce mental models, I provided an initial survey to gain a comprehensive understanding of the participants both as individuals and web users.
The users were split evenly by gender, with two male and two female participants. The male participants self-identified with deuteranomaly, a red-green color blindness that is most common. The female participants self-identified with tritanopia, a blue-yellow color blindness, that is more rare.
Within the survey the users reported that poor color contrast was of highest concern, followed by color dependent information, and then small text size.
Emotional impact - the heart of it all
I additionally strived to gain insight into the emotional experience of the users when confronted with inaccessibility. The emotions expressed over poor accessibility and usability ranged through several emotions - leading from indifference, to frustration, to loneliness. Universally though, the same story remained - the users would abandon an e-commerce website with poor usability and accessibility to seek out confidence within another.
“Having grown accustom to being color blind, I find that the lack of proper presentation of information on an e-commerce website no longer evokes emotion in me. Typically I’ll opt to leave such websites and visit ones where I can confidently navigate and feel at ease. ”
“I feel frustrated and easily annoyed because it is hard to see what colors I’m buying or reading writing on a website when they use similar colors.”
Personas
Synthesizing the learned information above, I was able to proportionally distribute the insights to develop the personas of Ella and Justin.
The research
All users had purchased an iPhone in the past, and all users had browsed Apple.com prior to purchase. From these past experiences, features valued while browsing were relayed; I latched onto these insights, recognizing these could enhance user confidence during the redesign. Features such as interactive scrolling, clean typography, clearly labeled colors on items being sold, clear buttons to show tech specs and sizing, and interactive product comparison features drew heightened observation.
Drawing from these values and experiences, I crafted task scenarios that would concurrently flow from one sequence of action into the next, mirroring Ella and Justin’s current mental model of browsing for an iPhone.
I incorporated both user values and hypothesized accessibility concerns while observing the users complete the task scenarios - comparing different iPhones, locating their final iPhone pricing, and saving results to continue browsing later. Encouraging the users to “think aloud” helped provide ongoing, insightful feedback. I was able to carefully document quotes, task times, and task pathways, placing care into points of confusion, frustration, and ease.
The results
What was meant to be a fluid process turned out to not be so. Getting from “Point A” to “Point B” was littered with usability obstacles, even more so than the color blind obstacles I had anticipated.
Apple prides itself on sleek design, but at what cost? The research demonstrated that not all “aesthetic” features were favorable while in action; despite the sleek UI, the browsing process became bogged down through inconsistent text size, heavy jargon, and headings with no clear purpose. The large, dynamic movement of imagery was named of value by some users in the pre-test survey, however posed a grievance in the research itself. Navigation was inconsistent, posing difficulties in the mental models of moving seamlessly throughout the website. Coupled with additional challenges, finding iPhone information valued by the users was difficult, posing potential challenges while browsing and decision making.
While redesigning the UI of the website, I focused on UX conventions to improve the visibility of valued iPhone information within one concise location.
“Oh my gosh…there’s just so much stuff in your face. Like, I’m scrolling and I just want to see like the iPhone I clicked on and learn more about it. I guess, I mean they have those features, but it’s so big and in your face; I kind’ve just want everything right there. Even though it’s very pretty, and I guess aesthetically pleasing, it’s just so much.”
When revisiting the hypothesized WCAG concerns, fascinating information was found; contrasting with the initial survey, small-text size was found to be of highest concern, despite being ranked the lowest of all in the initial survey. Color dependent information was found to rank in the middle, and most closely was linked to hyperlink coloring as well as iPhone’s in relation to their color names. Surprisingly, color contrast was not reported in the post-test to be of high concern overall, contrary to it being a main accessibility concern in the research amongst the imagery. Additional reported color contrast concerns included gray-on-gray text when coupled with small text size.
Through analyzing the research documentation chart, I was able to pull out the most relevant redesign features named by the users into the chart below:
It would be imperative for me to strengthen UX conventions and subsequently tailor the UI design strategy.
We’ve got the redesign features listed…now what?
Purposefully refining the UI strategy
In order to revise the features for optimal color blind awareness, I utilized a color blind comparison chart to assess how colors are perceived. I developed a triadic color palette utilizing Adobe Color, which alerted to no color conflicts within the palette.
I knew however that updating the colors within the website would be more complex. Knowing imagery was of special concern, I assessed the color contrast of the imagery and its background from both WCAG accessibility and color perception standpoints. Utilizing Adobe Express and Adobe Photoshop I was able to swiftly remove the background colors provided on the Apple.com images and incorporate color blind compatible backgrounds. When altering the background color was not feasible, I added a drop shadow, affording an additional color contrast differentiation not present on the current webpage. To account for color dependent information, I listed the name of the color with a blue-outlined color next to the iPhone.
Apple.com iPhone
Prototyped iPhone
As Apple.com’s imagery hindered the user’s ability to discover desired information, I stripped the information down into digestible parts. Through this, the users additionally were afforded readily available details without having to leave the page location, reducing the need for frantic navigation and improving upon recognition rather than recall amongst key information.
Apple.com landing page
Prototyped landing page
Surprisingly, standard UX conventions were not all present. I added clearly placed backward and forward arrows, as users should not have to rely on the browser arrows to navigate within a website. Though breadcrumbs were present to alert the user what page they were on, they were hidden at the very bottom of the page. I moved these breadcrumbs to the top of the page for clearer visibility. Due to difficulties locating the option to “save for later” and “add to cart”, I changed the shopping bag icon to a shopping cart icon utilizing the users' self-reported mental models of Best Buy and Walmart’s websites.
Prototyped cart
Apple.com cart
Best Buy cart
In lieu of the consistent gray on gray text, I found darkening the text and increasing its size enhanced the WCAG Success Criterion of improving the contrast minimum. Similarly, I darkened and enlarged the stroke of hyperlinks and features that had been manually selected. I additionally utilized WCAG Success Criterion text size standards to promote the user’s goal of consistent text size and placement across heading and body text.
Selection stroke and color
The principles and guidelines driving these changes provided optimization for the personas desires, WCAG accessibility, and overall usability.
High-fidelity Prototype
It was time to see the UX and UI revisions above in action.
Combining all of the research, persona input, and enhanced UI, I crafted an interactive prototype of the revised Apple.com features on Figma.
Static prototype screens:
High-fidelity homepage, iPhone 15 Pro landing page, and iPhone 15 Pro buy page
Disclaimers, limitations, and future roadmap
This color blind accessibility project allowed me to revise features of the Apple.com website utilizing assets already possessed by Apple. Not all features present in the prototype are redesigned or revised. The purpose of this project was to focus on accessibility and usability features, restructuring areas of concern, not overhauling the website’s UI or design library.
Knowing that websites are designed for different audiences across the globe, I tested the United States version of the Apple.com website. In doing so I acknowledge that this research may not apply across global audiences with alternative website presentations adapted to their respective cultures. Further research would need to be conducted to see which features are transferred across audiences and if cultural norms play a role in their accessibility.
Color blind accessibility and overall usability may differ amongst different age populations due to the physical shifts in eye sight that come with age. Additionally, this study only evaluated two variations of color blindness, deuteranomaly and tritanopia, though other color blindness types were taken into consideration throughout the redesign process. Further testing would need to be conducted to view if the proposed concerns and revised features have merit amongst cultures, ages, and color blindness variations.
View more designs: