Fandom’s Approach to Color Accessibility
Why and How Fandom Made our Products more Accessible through Color
Fandom is home to millions of passionate fans looking to deepen their knowledge and participate in a community celebrating their favorite TV shows, movies, and video games. Being a fan is universally embraced and Fandom welcomes fans from all walks of life, so it should be expected that our digital products do the same.
Building an inclusive product requires crafting experiences for all fans, including those with visual, speech, auditory, physical, or cognitive disabilities. At Fandom, we looked at how color accessibility could help empower fans to experience their communities in the best way possible. Research estimates that nearly 217 million people live with some form of moderate-to-severe vision impairment.
Fandom has a global audience of over 200 million monthly uniques spanning 400,000 communities. That’s a huge number of fans, many of which could be struggling to fully engage with their fandoms due to our current use of color. With this in mind, our product design team needed to take a closer look at how we use color across our products to determine what we could be doing better to meet our fans’ needs.
Here’s how we did it, what we learned, and a list of tools that helped us out.
Where We Started
We kicked off this initiative after being inspired by a talk from Allison Shaw, who outlined how her team was approaching inclusive design at Zendesk. It was incredible to see how much work went into making their design system more accessible and how passionate their team had become about making their experiences more inclusive.
Following the talk, we started to educate our team on the importance of inclusive design and the potential areas we could start improving. To kick off the project and make it more tangible we conducted a color audit of our product to show how the contrast ratios were impacting key experiences. After sharing the results of our audit, it’s safe to say we saw some jaws on the ground. A lot of our major UI elements and CTAs did not pass the recommended W3C (web standards) minimum AA rating, or even close to it.
The W3C Standards
- To meet the Web Content Accessibility Guidelines (WCAG) 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text (under 18px) and 3:1 for large text (over 18px)
- A contrast ratio of at least 3:1 is required for graphics and UI components
- Graphic elements (without supporting text) that are essential for understanding the content or functionality must have a contrast ratio of at least 4.5:1 as well. Long story short, always be checking your color contrast when designing things like buttons, icons, and cards
- Graphics that are very thin (under 3px) are harder to perceive, therefore have a higher contrast requirement of 4.5:1. Graphics that are thicker (3px and up) or are solid shapes have a lower requirement of 3:1
Making It Happen
From our audit, we identified links, buttons, notifications, and greys as the color adjustments that would make the most impact.
The color audit helped us understand the room for improvement, but the big question was where to start. As we began to dig in, we prioritized links, buttons, notifications, and our grays as adjustments that would make the most significant impact, and with our current design system in place, they were the most readily changeable.
For a bit of context, our digital color palette was a bit of a mess after enduring two rebrands in the past few years, during which we never paid enough attention to the accessibility of our core UI colors. With the dust settled from our last rebrand, it felt like time to refine our palette in an accessible way.
And with that, the explorations began…
The A11y Process
You’ll quickly learn when adjusting your colors to be more accessible that you have to make some trade-offs when trying to make them still feel unique to your brand. For us, we quickly ran into some issues with our old warning color and struggled with where to go with our button and link colors. However, after a few critiques and many tweaks, we felt confident in the palette adjustments we had made.
To start, our notification colors now have much higher contrast ratios while still nodding our core brand. For this part, we had to introduce a few new colors, like a true orange and green, but the trade-off was more than worth it. They now properly convey Error, Warning, Success, and Information — all in an accessible way.
Next up, our link color became slightly darker which will help fans in a deep read easily navigate from Jon Snow to Tyrion Lannister. When it comes to buttons, our primary button became more on-brand than before by leveraging our two lead colors. Meanwhile, our secondary button transformed into a ghost button, utilizing one of our accessible greys. It’s dialed back, and yet it still feels a part of the fam.
Last but not least, our greyscale is now fully thought out with natural increments from light to dark and guidance on how to properly use them in accessible ways. While some designs may look nice with that light grey accent here and there, the lack of accessibility is more harmful in the long run — defining a framework for when and how to use each grey has really helped us be more responsible when designing new experiences.
Overall our refined colors are accessible while still feeling part of the core brand, which was one of our goals from the start. With tools and frameworks in place to ensure critical information and UI components will pass W3C standards through the use of accessible colors, the Fandom Design team can now quickly create inclusive experiences for all fans to enjoy.
We’ll be working closely with our partners in product and engineering to incorporate these updates into our Fandom Design System and across our products over the coming month.
Learnings
- Having one dedicated team member to lead this cause and become the Accessibility Police will be incredibly helpful
- Sharing statistics about the number of people with a visual impairment is really impactful and immediately helped us get buy in on the project
- Staring at colors hours on end will make you go crazy, so make sure to take breaks from the screen and come back with fresh eyes
- Lean on team members if you’re stuck. For instance, another team member helped push buttons to the finish line after I felt like I had explored every possible option
- Don’t beat yourself up over getting colors to that 4.5:1 ratio. First, understand the use case for each color and how frequently they are used. Many products make small exceptions to the rule in order to keep colors feeling on brand
- You’re going to hate orange and yellow after this
Tools
Here are a few tools we found of use on our journey.
- Stark Sketch Plugin (contrast plugin)
- Sketch Runner Plugin (keyboard shortcuts that makes life a little easier)
- Material Design Color Tool
- Colorable (for finding the closest accessible color to a hex)
We hope you enjoyed reading this and feel a little inspired to dig into color accessibility in your next project!
Props to Derek Hart for second eyes on this article.
