How I Designed a Colorblind-Friendly Palette
While there may be many articles about colorblind-friendly palettes and how one can choose a perfect palette, this is my story of how I became a person who knew nothing about color blindness to designing a colorblind-friendly app.
Alright, I’m a bit embarrassed🙈 to say this but the first time I came to know about color blindness is when I watched Kenny Sebastian’s “Chai time” show where he mentions him being colorblind but also manages to show us his amazing knowledge of art.
Initially, when I was told that I had to choose a palette that was a colorblind-friendly, I didn’t know where to start from. But then I stumbled upon this amazing software called Adobe Color🤩
Consequently here is my journey of selecting a colorblind-friendly palette in 3 simple steps.
So even before I choose my colors some things needed to be considered.
1. Selecting a palette that was comparatively specific to fewer audiences.
2. The palette had to be compatible with a Dark theme UI.
3. Choose as minimal colors as possible.
There are multiple ways one can design a colorblind-friendly palette.
For example, If you use Adobe Color you can select colors that you like, check the conflict lines, choose colors accordingly and review over and over again or you could merely pick up a palette, view it in colorblind mode to check if it’s suitable or not.
My approach was a combination of both these methods. So instead of generating varied palettes for Protanopia, Deuteranopia, and Tritanopia, I decided to explore the colors that I liked and then see which one can be used.
Step 1: Exploring various colors
I started with Coolors.co which remains a remarkable place to start, if you want to explore color palettes as well as an option of viewing them in 8 different modes😲 like Protanopia, Deuteranopia, Tritanopia, etc.
So I found some attractive palettes and after reviewing them in different modes, I narrowed them down to these.
Step 2: Deciding on the appropriate one
The color palette from Coolors.com was exported and confirmed with Adobe color. I further had to narrow it down from 3 palettes that I had selected to only 1 palette that is suitable enough.
Conflict guides helped me decide the valid shade to choose from.
Step 3: Getting it right
Acquiring the color that makes an impact was challenging
Some feedback I had received are as follows:
“Why is the color so dull?”
In order to eliminate this, I researched on various platforms that had already incorporated colorblind-friendly systems. For example, Trello, Slack, Asana.
I took inspiration from the way they were designed and accordingly tried to change my color palette.
Another tip would be to add icons so that the app looked more accessible and hopefully that bridged the gap!☺
