Featured

Stark

The color-blind simulator and contrast checker for Sketch.

DiscussionYou need to become a Contributor to join the discussion - Find out how.
Cat Noone
Maker
@imcatnoone · Founder & CEO, Iris
Hey everyone! Pumped to be featured on Product Hunt. We built Stark, the color-blind simulator and contrast checker for Sketch. Our goal in doing so is to help designers start thinking about and executing on designing with accessibility in mind from the very beginning of the product building process. Providing them with the tool(s) to determine whether or not their product (website, app, etc.) is truly accessible for individuals with any form of color blindness—from choosing colors that appeal visually no matter the color blind type, to checking that the contrast ratio of said choices is high enough. All based on WCAG 2.0 standards. All too often we as designers speak about our need and position of solving problems for individuals on a global scale, but forget that accessibility must be part of that discussion. We cannot boast about our product being for everyone, if it is not in fact set up in a way that is usable for those who don’t fall into the “typical” category. Just because an individual with Color Vision Deficiency has the ability to download our products does not mean it provides them with the same experience as someone who has typical color vision. And it is irresponsible of us to design and launch products knowing just how many individuals we exclude when we do. But when working on the products I have, I’ve had to go used some pretty crappy methods to determine whether or not they were accessible for individuals who are color blind. And quickly realized how ironic it is that the tools to make things more user friendly for those with CVD and many other individuals who products should be accessible for, were terribly designed and hard to find for us as designers. We started with what you see here as something to get out there and receive your feedback on how we can improve by adding or taking away. We firmly believe that knowledge is power and making the material on this embedded into the tools we use on a daily basis means we as designers don’t have to search for this and validate the accuracy. It also gives everyone little excuse as to why you did not take the time to consider the decisions you made in your design. With that said, some of our goals moving forward are to provide more educational material surrounding Color Blindness and enhance the contrast checker to let you know why it passed or failed in terms of ratio. More importantly, we’re always looking to educate ourselves more on this topic to continually provide all of you with the best tool(s) out there to design with. If there is any feedback you have, please don’t hesitate to let us know. We’ll be chatting here and answering any questions you may have. Here’s to designing beautiful experiences that everyone can use. We have the world at our finger tips, and nobody should be deprived of that privilege.
Ale Muñoz@bomberstudios · Design Hacker @ Bohemian Coding
@imcatnoone Been using it for a bit, and it is absolutely wonderful. Thanks for building this! ❤️
Cat Noone
Maker
@imcatnoone · Founder & CEO, Iris
@bomberstudios Thanks so much, Ale! The feedback of you and your team is beyond valuable!
Franco Varriano@francovarriano · Co-founder 💯 | Host @ Hack To Start
@imcatnoone congrats - love this!
Cat Noone
Maker
@imcatnoone · Founder & CEO, Iris
@francovarriano thanks so much, Franco!
Rowan Cavanagh@rowancavanagh · Interactive Designer at EPAM
@imcatnoone It might be cool to provide numbers on how common each type of colour-blindness is? Maybe not prominently, but I've always found it impactful to say that 8% of men have a form of red–green deficiency.
Ale Muñoz@bomberstudios · Design Hacker @ Bohemian Coding
@rowancavanagh @imcatnoone +1, that would be a very nice addition
Cat Noone
Maker
@imcatnoone · Founder & CEO, Iris
@rowancavanagh Good point! Providing educational material is something we’re working on going forward. What value would the % of each provide for you and/or how would that impact your design? Or rather, how does not having the percentage impact your design?
Rowan Cavanagh@rowancavanagh · Interactive Designer at EPAM
@imcatnoone I wouldn't say it would impact the way I visually design, one way or another. But more in how I would value it and sell it in as a worthwhile consideration to those I'm working with/for.
Michael Fouquet
Maker
@_fookay · Design Team Lead, Hudl
Hello everyone! I helped Cat and Benedikt put together this plugin and I thought I'd drop in to give a little insight as to how it works. The colorblindness simulation grabs a high quality “snapshot” of your design and applies an established algorithm to give you the best possible representation of what someone with CVD sees. It works by changing the RGB value of every pixel to match the colorblindness type. Also, through the use of this “snapshot”, scrolling and zooming on large artboards is just as quick as anything you do in Sketch and flipping through the different types of colorblindness is just as fast. Contrast checking works how you’re used to, but with Sketch, we can grab the exact RGB values for the check - no conversions from another color format. Additionally, we can support one of the colors having a lowered alpha value/opacity. By “mixing” the colors, we can still accurately determine what the contrast ratio would be. Like Cat said, we're still striving to educate ourselves more on this topic and we're excited to get feedback so we can continue to improve the product. Thanks everyone!
Fred Carlsen@sjelfull · Web developer at Bakken & Bæck
So good!
Cat Noone
Maker
@imcatnoone · Founder & CEO, Iris
@sjelfull thanks Fred!
Sam McAllister@sammcallister · CEO, Stem Watches
This is awesome well done!
Thanasis@tnsrig · UI/UX @travelplanet24 @airtickets_gr
@imcatnoone Excellent !
Cat Noone
Maker
@imcatnoone · Founder & CEO, Iris
@tnsrig Thank you! :)