Designing accessible color systems (stripe.com)
almost 4 years ago from Wilson Miner, Product Designer at Stripe
almost 4 years ago from Wilson Miner, Product Designer at Stripe
Using Lab space is not new, but the tool they made is impressive.
For real. I loved the article and the colors they came up with are great, but my main takeaway was that I really wish they'd release that tool.
Really interesting, would love if you could share the tool. I hacked together a colour visualiser in relation to contrast, but then realised it was just too confusing to use haha, yours looks way clearer. http://color-by-contrast.surge.sh/
One thing I did notice when I made this tool was there's a pretty simple answer to getting a pallet that is - high contrast - has as many hues as possible - really vibrant
Just have the background colour dark, not white.You can get a much higher range of contrast on most hues comparing to black. Did you ever consider a dark UI for the sake of accessibility approach?
Incredible work!! What software did you use to map the shades of colour along the lightness, chroma, and hue graph? It looks like a custom Stripe interface.
Is the Stripe design system publically available? You all do such great work!
Finally, why is mid-Orange on a white background always rated so low when using a contrast checker?
Yellow is tough! Yellow and orange are the lightest hues perceptually, and there's really "no such thing" as a dark AND bright yellow. So we made those colors a touch lighter than some of the others to get a little more saturation out of them. That's also why we pair the text colors with a lighter color (either an icon or a background color) that has more saturation, so the color is easier to distinguish.
Our design system is internal for the time being, but we're trying to share more about it, like this post!
accessible-colors.com is by far my favorite checker. If allows you to adjust for boldness as well offer suggestions.
Designer News
Where the design community meets.
Designer News is a large, global community of people working or interested in design and technology.
Have feedback?
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now