Subscribe
Sign in
Colorbox by Lyft — Create accessible color systems 🎨
Colorbox is a tool to produce color sets open-sourced by Lyft's design team 🎨
22
Replies
@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.
@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-appro...
This is really cool @kvyn_ and @soffes! I see this as a really useful tool when working with colors for various heatmaps in the product I'm currently working on.
One thing though: When working with hue it always generates stops between the point furthest to the left and the point furthest to the right. So if for instance the first point is set to 50, and the second to 320, it will generate stops between 50 --> 320. Now if you reverse the points it simply reverses the order, now generating stops between 320 <-- 50.
The issue here is when what you really want to do is generates stops between 320 --> 50. In that case it would generate stops up to 360 and continue from 0 up to 50. As it stands right now, its's really not possible to get a palette that starts around the magenta range, and ends in yellows without going through all the blues and greens as well. Does that make sense?
I really love this tool, and I believe a tweak to the hue system could potentially make it even more useful :)
@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.
I commend Lyft for this big step and anything that helps with accessibility. As a dyslexic I greatly appreciate tools like this.
Well, if you are a noob in graphic designing, this platform helps you avoid choosing ugly color combinations. :D
Pros:Excellent Tool
Cons:None
Dropbox DocSend