Considering color accessibility as part of our design process
We recently made a post on Instagram showcasing the new design enhancements coming to the RefineAI website. This prompted our friend Daniela Hernandez to ask us about our design process regarding color accessibility.
Recent Instagram post showcasing the new RefineAI.com
Every designer needs to actively think about color blindness
According to Colour Blind Awareness, approximately 1 in 12 men, and 1 in 200 women in the world are affected by some kind of color blindness. That's a staggering number and something that doesn't get nearly enough attention.
When we think about those numbers as they pertain to our website, brand, app UI, etc., there's a high probability that many people affected by color blindness need to interact with our products. On top of that, our brand is colorful and relies on colors to signify [8] different raw emotions. As such, checking for color accessibility is an integral part of our design process.
Here's our design process to check for color accessibility
We rely on Stark, a plugin made for Sketch to check for color accessibility.
Getting started couldn't be simpler.
- Install the Sketch plugin
- Open up a new file
- Go to Plugins>Stark>Show Stark
Once you click on that, a new overlay window will pop-up over your design file.
From this new window, you can select from a list of color blindness conditions. This, in turn, allows you to simulate the condition in real-time and freely move the window over different parts of your design file.
One thing that we really like about Stark is also the ability to learn more about each condition. From the tooltip, you can get an estimate of people affected as well as an explanation of what the condition entails.
Our website design, overlaid with the Stark plugin for Sketch
Using Stark as part of our design workflow
We use Stark at different points in our design workflow. For example, when selecting which colors we'll use for our brand standards, communication and emotion representation. We also use the plugin when designing new features, landing pages, and social media materials.
For us, learning and applying solutions for color accessibility as part of our design process has become part of how we think about everyone who chooses to use our product or interact with our brand in any capacity.
We were also inspired to write about this after learning that Pablo Stanley, one of our design heroes, shared his story about discovering that he was color blind. Check out his video here: https://youtu.be/b5xS8p5mkUo
Video market testing as a service.
Gather actionable feedback for your videos in minutes.
Do you have a good use case for RefineAI? Leave a comment below or drop us a line. Don't forget to share!