I've got a lot of color background[0]. This is a cool approach for sure, but one thing I would caution anyone on doing is only relying on math or an algorithm to choose colors. The author makes a great point about halfway through - that it's extremely hard to algorithmically define "nice looking". Human eyes are biological constructs. Mapping how they see the world to an algorithm that's working with RGB colors is a half baked effort at best. Use algorithms as a starting point, then refine afterwards. The author's approach feels like it didn't include that final refinement process.
IMO their approach fell apart a little bit in the chart of age distribution of users. While the even color distribution does prohibit a bias of the data, it's also using colors that don't feel harmonious with each other at all. The luminousity of the colors differs heavily, making some feel more bold than others. A better approach here would be to isolate specific hues that match luminousity, then filter those based on color blindness perception, rather than just tossing each of the hues palettes into a simulated annealing process.
A final nitpick, if you are doing color theory maths, avoid WCAG 2's contrast algorithms. They're fairly outdated, and should only be used if you have an enterprise requirement to use WCAG 2 specifically. APCA[1] is a better algorithm for color contrast, and is ADA/EAA compatible (it's also the proposed contrast algorithm for WCAG 3).
[0] Most recenly was in charge of Figma's update to accessible colors and their migration to dark mode. Previously worked on Atlassian's color palettes.
[1] https://www.myndex.com/APCA
Everyone should use color combinations that satisfy WCAG 2.x's contrast algorithms, there are probably legal standards that apply to your business that expect it. If APCA's advice is more conservative for some combinations, fine.
APCA might be better overall, it's not definitive. WCAG 3 is many years away and there's no telling when, or if, laws will be changed to adopt it; WCAG 3 isn't even expected to immediately supplant WCAG 2.x, they're expected to exist in parallel.
Would BPCA[0] be a good compromise? If you pick color combinations that pass both the APCA defined level and the WCAG2 level then it should be "compliant on paper" with WCAG2, and actually readable in practice thanks to also being compliant with the new APCA levels.
Personal gripe here, but I find it a bit annoying when websites think they have to do all their graph colors using brand colors only.
You often end up with a mess of having many, barely distinctive shades of the same color, undesired/potentially misleading visual groupings (by color), hard-to-match legends, unequal prominence of different bars om the graph, etc.
It's surely not impossible to find a larger range of more diverse colors that look nice and don't clash with the brand/layout colors. Just relax that branding requirement a little bit, and you can get way more readable graphs.
This seems like a case of intentionally reducing usability/readability in favor of some (misguided?) marketing goals to me.
> Personal gripe here, but I find it a bit annoying when websites think they have to do all their graph colors using brand colors only. ... It's surely not impossible to find a larger range of more diverse colors that look nice and don't clash with the brand/layout colors. Just relax that branding requirement a little bit, and you can get way more readable graphs.
To be fair, the algorithm in the article is doing exactly that, expanding the palette into colors compatible with it that go along well.
Oh this was not meant to be a criticism of that article. They do a good job of getting a nice color distribution - mostly by ignoring/working around that "only brand colors" requirement they mention at the start. Which goes to show both that it is possible to find nice colors that fit in, and that you get better results when relaxing the brand color requirement.
I agree that this project is needlessly hamstrung by having nthe colours be the same as Stripe's, but then again limiting yourself creatively can lead to solutions you'd otherwise not think about / you're forced to think creatively
I'm not an artist but I make things and paint things and cook things and plant things (is horticulture an art?) and make music.
I have my "rule of three." Pick any three colors and use them together (my foyer is brass, evergreen-ish, and mint) - they work visually for everyone I've met. Pick any three musical notes, even on a microtonal scale, and they form a pleasing chord. Any three simple flavors (chocolate, dill, and cayenne?) may be weird but interesting but not overwhelming.
> Pick any three musical notes, even on a microtonal scale, and they form a pleasing chord.
I cannot speak to the color part, but the music part doesn't ring true to me (pun intended). For example, if I pick the first, the second and the seventh of the Phyrigian scale, it sounds pretty jarring to me (like, playing E, F, and D at the same time). And, this is staying pretty much within the scales in western classical music (although I doubt anybody would play it, I bet somebody made it context). Also, extended chords with > 3 notes sound pretty fun and has been the staple of western music for a while (blues, jazz for easy-to-reach examples).
If you play those notes in a close voicing they can be jarring (although I went through a phase of composing with close clusters of tones just like that in my 20s), but if you instead play D, F up a minor third and then put the E a major seventh above the F, you end up with a chord that functions like Dmin9 (or more accurately DminAdd9). The missing fifth gets added psychoacoustically (jazz pianists have taken advantage of this for ages by playing the 3-7 of a chord in their left hand and the melody in the right hand, letting the bass cover the root and the brain of the listener add the 5).
D-E-F and its relatives are used everywhere. Examples
Pink Floyd Comfortably Numb First chord of verse
Eye of the Tiger (Survivor) First chord of verse (“Rising up” lyric)
You can say it’s a different bass note, and so it is. There is something about the chocolate-dill-cayenne example as well that if the harmony was 90% cayenne it probably wouldn’t work. Dill, it would work a bit better. Chocolate, it would work the best.
Same with the foyer. Dominant brass might be tougher than dominant evergreen or mint.
Consistently applying a design language is probably more important than the design language (e.g. your rule of threes) itself.
Except for exceptions to your design rule which will form the finishing touch. :)
Another nice design palette rule that works well is black or dark gray, white or light gray, one nature color (wood, rock, ...), and one vivid color. (That's a set of 4.)
I agree globally. I'll keep my remarks to myself they're not crucial, but here's another example I've put to test many times and you can try every day:
Never wear outfits with more than 3 colors.
I have simplified my garderobe tremendously by choosing garments mostly of neutral colors and some of brighter colors.
By limiting to simple fabrics, I can match almost anything with anything else from my drawers and still have nice results.
The rule of three is not about juxtaposing any three random elements, it's about taking three things which are related to each other. It's not any three things producing harmony, it's a human selecting three things which produce some effect. This is true for rhetoric because the rhetorician has a purpose he wants to achieve.
And another nitpick: It seems perfectly possible to pick three colors which don't work well together. If two of the colors clash with each other, it won't matter what the third one is. With a chord, I suppose (without confidence) that it works because you're hearing all three notes together, but that's not how colors work: if you see the two clashing colors side by side, it's not visually pleasing, even if the third color works with each of those clashing colors individually.
> With any three things, you have harmony to humans.
In math, specifically dynamical systems, a lot of interesting stuff starts appearing after some variable goes up from 2 to 3, such as Period 3 Implies Chaos[1] for discrete maps, and the chaos in the 3 bodies problem. In continuous time systems, having 3 variable is the necessary condition for chaos to occur.
My personal guess and take away is that having 3 of something is the bare minimum for nontrivial interactions to happen.
Nitpicking critique: The excessive JPEG compression used for the diagrams is really distracting. I normally wouldn't mind it but this article is literally about presenting data with images. The green rectangle in the "with borders" diagram has such severe ringing artifacts that I thought it was part of the intentional design at first. Since there are very few colors in each diagram, PNG should result in even smaller file sizes while looking way better.
It's likely the site itself, as the .jpg extension is referenced in the html. The screenshots should be pngs, not jpgs. Weirdly the author is using a mix of both - it could be that their site automatically encodes larger images as jpgs. The full res jpg versions are heavy with artifacts.
I tried this with my site and I am pretty impressed with the results. We will likely use this to update our visualizations and hopefully make them more accessible for folks with disabilities! Thanks for this, great writeup!
It's a pretty common technique to use HSL and some simple math to do this with CSS, but even if you use a perceptually uniform color space, colors of different hues but similar chroma/value doesn't ensure accessible contrast. It also means that in the naive case, your colors end up being very "rainbow" -y.
I hired someone to create a method to find the x most different colors in a restricted color space using a Voronoi mesh and their solution used a Monte Carlo method. I wonder if annealing would be better. https://mathematica.stackexchange.com/questions/136754/point...
color spaces are roughly continguous, so i suspect the algorithm doesn't matter much because the solution space doesn't have a lot of "kinks" in it where you'd easily get trapped away from a global maximum.
what matters more is the difference function for evaluating the colors. in this case, the author used CIE's ΔE* measurement, which attempts to take into account perceptual difference, rather than strict mathematical difference. it sounds like you could find different such functions that may subjectively perform better or worse for a given application.
The bar charts with borders look gorgeous, but it's hard to tell where exactly the bars begin and end. There is also the question of whether you retained the bar width and spread them out, or if you shrunk the bar width to create gaps.
I came up with stupid solution but it worked so I don't think it was that stupid. Well over decade ago I was working for tiny digital/advertisement agency. I was website dev/guy dealing with whole IT and next to me was working a graphic designer. Every once in a while some customer was asking to make graphics with specific colors that we couldn't figure out how those would work together. Instead of trying different hues that would work together I came up with idea of simply googling those colors and adding "logo" on the end. Without a fail we was always able to find something that worked good enough to not make you blind. No theory, no advanced methodology just couple of guys, fresh out of school figuring stuff out as best as we could
Replace annealing with backprop / sgd, integrate over the loss function with a nn and you'd arrive at something like the many ai palette generators that swarm the web. I suppose the takeaway here is designing a loss function that suits your aesthetic goals.
I have a problem with the borders vs no borders example. After applying the borders, Edge looks like it has less visitors than Safari. This is because the border is white, as the background.
I just checked again and you are right! I just assumed that the border was cutting into the blocks themselves but it seems like it's actually extra added space.
Borders did make the graph look better though. It would likely be better for situations where each bar has the same number of sections. Otherwise, making the white border overlap the graph itself (so it doesn't increase the size of the bars) could keep it from being misleading. Of course then small sections could get completely covered by the border...
It's worse than that even. The actual color blocks are the same size, the gap is added on, so Safari gets about an 8% "boost" just from having multiple chart elements
Speaking of which, D3.js color gradient choices are the worst, all the colors are too close for contrast and it seems its a preset selection I’m currently not sure how to alter
> The colors should look nice. In my case, they need to be similar to Stripe’s brand colors.
Maybe. I would imagine "nice" can have an impact on credibility. First, I would hope, you want people to believe and take seriously what's being communicated.
Also, "nice" is subjective, certainly at a cultural level.
I'm not knocking the article. Only pointing out she / he might have missed a significant assumption.
I’m a bit confused here. You can pick what colours to use? https://www.prepressure.com/library/file-formats/gif The gotcha is you’re limited to a small number of colours, unless you apply dithering to increase that slightly.
Whatever you do, don’t use “web safe” colours as that refers to a time (in the late 90s) when not all monitors could display more than 256 colours (if I recall correctly, due to graphics cards and operating system settings), and Windows and Mac disagreed slightly, resulting in 216 “web safe” colours.
But you’ve always been able to pick the colours a gif uses and these days perceptual modes exist to try and simulate the colours better with dithering.
And this has nothing to do with the original post.
At one point in a past life I was in a PhD Applied Math program and one of the professors who was into computer graphics gave a lecture on data visualization. She encouraged us to pick artwork we like and run it through Adobe Kuler to get palettes, because there was no way we'd acquire a taste for colors and complete a PhD at the same time.
That was a fascinating read and an useful algorithm.
I wonder how the results were if Greedy or Branch and Bound or some random genetic algorithm was used. I feel that for these types or problem there might be many algorithms that will do the job.
The biggest problem in almost all charts is very basic. Luminance difference between adjacent areas should be high. So basically alternating dark and light patches.
IMO their approach fell apart a little bit in the chart of age distribution of users. While the even color distribution does prohibit a bias of the data, it's also using colors that don't feel harmonious with each other at all. The luminousity of the colors differs heavily, making some feel more bold than others. A better approach here would be to isolate specific hues that match luminousity, then filter those based on color blindness perception, rather than just tossing each of the hues palettes into a simulated annealing process.
A final nitpick, if you are doing color theory maths, avoid WCAG 2's contrast algorithms. They're fairly outdated, and should only be used if you have an enterprise requirement to use WCAG 2 specifically. APCA[1] is a better algorithm for color contrast, and is ADA/EAA compatible (it's also the proposed contrast algorithm for WCAG 3).
[0] Most recenly was in charge of Figma's update to accessible colors and their migration to dark mode. Previously worked on Atlassian's color palettes. [1] https://www.myndex.com/APCA