Colorbox by Lyft - Product Stars
Best products of October 2018

Colorbox by Lyft

Create accessible color systems 🎨

Upvotes 1,130 PH Page >
Amrith Shanbhag
Hunter
@kvyn_ @soffes I'm not even a designer and I enjoyed playing around with this 😍🎨 Would love to see what people make out of this 🙏
Wojtek Witkowski
This is super cool. Will be useful for sure. Thanks for making it freely available, Lyft team!
Jad Haidar
This is very cool, thank you for sharing!
Mike Shoss, CSM SPM
Wow, thanks for making this a open tool! Love it.
Tim Cook
I love all of these new accessibility color tools coming out! Quick question for @soffes or anyone else. How do these contrast standards translate to print? Is it the same or a little different?
Sam Soffes
Maker
@thetimcook I think it's the same, but that's a question for @kvyn_ 😃
Tim Cook
@soffes I guess it really depends in the size of text and the paper used. I’ve been using Contrast for a while on web projects, but I want to share the love with my design team.
Kevyn
Maker
@soffes @thetimcook These contrast standards are only for on-screen colors. Unfortunately, it's significantly harder to measure color contrast in print because contrast of colors in print is made up of more things like - pigment of ink, color of paper, the paper's material, and the lighting of the environment, and so any of those factors will affect the ability for a person to read the content. Because of that, it's probably best to define a contrast ratio that you & your team feel comfortable with based on what you know, and then adhering to that. Adhering to a flat 4.5:1 contrast probably just is overly simple for printed material.
Nick Frost
What does it mean by “accessible”?
Sam Soffes
Maker
@thinker here's a guide my friend @mds wrote about color accessibility: https://usecontrast.com/guide. Basically, WCAG 2.0 (web accessibility standards) defines it as certain contrast ratios. Ideal contrast between text and a background is at least 7.0.
Mallory Amanda
@thinker @mds @soffes Had the same question! Lyft didn't define accessibility or reference any standards in their blog post for ColorBox-- wanted to confirm before I shared with my team https://design.lyft.com/re-approaching-color-9e604ba22c88
Sam Soffes
Maker
@thinker @mallorypickard confirmed as WCAG 2.0. Maybe @_kevyn can update the post 😃
Abhishek
Awesome !!
Gabe Sanchez
@kvyn_ @soffes after using the tool, I see that you have to identify the color using all the parameters instead of let's say entering a beginning and end hex value for the gradient range. Any thoughts on when something like this might be added?
Roisi Proven
This is a wonderful tool. I'm gonna be fiddling with this all day now.
Arthur Camara
Beautiful tool
Trémus
Great interface, upvoted It would also be cool if you could save it as a .aco for colour swatches in photoshop.
David Alexander
I commend Lyft for this big step and anything that helps with accessibility. As a dyslexic I greatly appreciate tools like this.
Elizabeth S Hunker
Instantly bookmarked. @amrith @kvyn_ @soffes @lyft
Markus Stefanko
Now I need this to work with my wifi led magic light bulbs. Color pickers of existing solutions are hell - too much skewing towards colors you usually don't want in lightbulbs and too little towards dimming / white / warm colors Who the heck needs all these flashing options /rant
null