Photo from Pexels edited using Color Oracle & Sketch

3 Free Tools to Ensure Color Blind-Friendly Designs

Millions of people suffer from some form of color blindness. Here are 3 tools that will help you be mindful in your designs.

Briana Lauren
Trust the Product
Published in
3 min readMay 19, 2017

--

I was talking with a fellow designer recently about a new style guide we are working on. As we were reviewing our color pallet, I mentioned testing for color blind friendliness, since 1 in 12 males suffer from some form of color blindness. My co-worker was shocked. He had no idea that so many people were color blind. I used a tool to show the color difference for the most common case, and we instantly saw quite a few of our lighter colors were indistinguishable. Finding this early allowed us to make important changes to the style guide, which will influence our designs.

After that conversation, I realized it might be helpful to share some tools I use to check if my designs work for people who have any type of color blindness.

#1 Stark

Stark is a Sketch plugin that allows you to preview your work in 8 different types of color blindness. In addition to checking if your designs are color blind-friendly, Stark also contrasts levels if you select two layers. Spark is a new tool for me, but I think it’s really impressive and love the ability to export.

#2 Color Oracle

Color Oracle is an open source project created by Bernhard Jenn and Nathaniel Vaughn Kelso. Now I know the website looks kinda shady but this tool works. Some nice features include keyboard shortcuts, application agnosticism and menu bar access.

#3 Colorblind Web Page Filter

Colorblind Web Page Filter is a web based tool where you can copy a URL and view a side-by-side. You can copy the filter URL, view the side-by-side in full-screen mode and view 4 common types of color blindness. The only problem I have with using this tool is you have to copy a URL, and I prefer to check my designs early in the design process. That being said, you can use Colorblind Web Page Filter to check early prototypes.

Do you have any tools, tips or trick that help designing for or with color blindness? Comment below or message me on Twitter.

If you found this helpful 💚 or share.

--

--

Briana Lauren
Trust the Product

For nearly a decade, I’ve lead design teams in crossing the chasm from startup to acquisition. Now, I lead a design team @Meta.