Designing Accessible Color Systems
Ironically, even though the contrast ratio of the body content is technically passing the contrast threshold, it's unpleasant to read. It's the combination of the lighter shade of grey, small font size and the thinness of the font glyphs themselves.
> We built a web interface to allow us to visualize and manipulate our color system using perceptually uniform color models.
Is this tool available anywhere?
This article reminds me of Contraste [1], a free little app for macOS that allows you to quickly know if a combination of colors, for a text and a background, passes accessibility thresholds defined by the W3C, and thus is accessible to users with visual impairments. The app was made by Laurent Baumann, who is also the author of Couleurs, a free color picker, for macOS as well.
In my brief dive into colorspaces I got the impression that CIELAB isn't actually that uniform and there are better spaces available, such as DIN99o (actually DIN 6176). Is this right?
I have always been a fan of stripe product launch page. The text is clear and to the point, the graphics/animations are engaging, not annoying pop-ups, the color scheme is not hurting my eyes. The best UI/UX experience I have of any website. I remember the web page which had game of life as the background. Really geeky yet fun to watch. Also, stripe's REST API documentation is just too good.
This looks like a good basis for a color scheme for code (vscode, terminal, emacs, etc), anyone working on this ?
How many distinct colours can I use in the same image and still be able to tell apart when the coloured boxes might be arranged in any order?
I'm trying to come up with a colour scheme that supports categorical labelling for as many categories as possible - that means I want the colours to be distinct from one another, to be able to recognise each category with ease, but at the same time cover as many categories as possible. With <10 categories it's easy, with 20 I struggle.
Can anyone make a suggestion? I am not interested in uniformity of lightness or linear progression, but maximal separability between nuances.
Great stuff.
Do Stripe products make affordances for people who are color-blind? For instance, do "error" notifications always contain an icon for "error" as well as a red background/text color? The "Differentiate without color" option on macOS and iOS comes to mind.
[disclaimer: past Stripe intern]
One trick I found that youtube and google use is to make the light grey text not #777 (min allowed contrast on white background), but rather like rgba(70,70,70,.8). The alpha lightening makes it have enough contrast even if presented on a light grey background.
I built similar perceptually uniform color library: https://github.com/neilpanchal/Chroma
The sad part is that we have all these colors available in the physical world but representing in sRGB (or even Adobe RGB or DCI P3) space takes away all the fun. We have a narrow space to work within and it poses limits to what you can do. Vast majority of monitors in the world are barely capable of representing sRGB space, and even if they are, calibration is another issue. You can employ all kinds of science in representing proper colors but if the end user's calibration is not good, all bets are off.
Colors are a problem for interface design (and accessibility), it becomes a real challenge when dealing with quantitative data and build perceptually uniform colormaps with accessibility considerations, here is an amazing presentation of Matplotlib's new colormaps: https://www.youtube.com/watch?v=xAoljeRJ3lU