How to pick the least wrong colors
matthewstrom.com
matthewstrom.com
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
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.
There’s nothing wrong with supplementing it with something else, going beyond meeting WCAG based on other data.
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.
To be fair, the algorithm in the article is doing exactly that, expanding the palette into colors compatible with it that go along well.
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.
This echoes the rule of three from Latin rhetoric. https://en.wikipedia.org/wiki/Rule_of_three_(writing)
With any three things, you have harmony to humans. More than three and it's iffy. Again, I'm not an artist (so I stick with threes!).
Who's done research in this? Art? Historical? Cog psych? It seems like there's something revealingly human in this.
Anyway, I would like to see the analysis re-run with triples. The author even says:
> for just three colors, there are more possible palettes than there are atoms in the universe
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).
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.
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.)
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.
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.
It works incredibly well.
I take it you don't like Indian food then. :)
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 the ubiquity of HTTPS nowadays, I don't think doing this is very feasible.
It is basically for when you want colors of different hue (chroma) but similar saturation and luminosity.
Stripe's color system blog post gets into the nitty gritty of getting this right, at least for curated colors: https://stripe.com/blog/accessible-color-systems
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.
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...
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.
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.
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.
Even ML can be used. :)