Common color mistakes and how to avoid them
blog.datawrapper.de
blog.datawrapper.de
But it's a great explanation. I think this is something that everyone should know, so the more material out there, the better.
[0] W3Schools is not everyone's cup of tea, but they have a great section on colors: https://www.w3schools.com/colors
[1] Colorblind design is important. This helps with that: https://www.toptal.com/designers/colorfilter
[2] I've found this tool useful: http://paletton.com
[3] "Clickbaity," but also fairly useful: https://www.colorcombos.com
[4] This is a cool tool: https://www.colorbox.io
I find Adobe Color quite helpful to find a palette for visualization [1]. Its been around for years now, although I think the original website was called Adobe Kuler.
For categorical colormaps, I have found the python Glasbey [2] library helpful. Note: the first run can be slow.
[1] https://color.adobe.com/explore For popular themes filter using "View" (right side of the screen under the main banner) and pick "Color Themes" => "Most Popular"
I'm colour-blind; I've never known exactly what type (for sure red/green).
I can tell the difference between original/filtered at that link for both protanopia and deutanopia, though they are close. Perhaps that means I have both/a mixture. (They're described there as being anomalous red vs. green cones, so it seems reasonable that I could have anomalous both.)
When it comes to 'colour-blind mode' settings I set my mild annoyance (could you not just pick a friendly default? It's not like I can't see any reds (for example) at all) aside and just pick whichever type is most visually pleasing or easily distinguishable.
[0] https://apps.apple.com/us/app/sim-daltonism/id693112260
[1] https://apps.apple.com/us/app/sim-daltonism/id1050503579
https://www.aao.org/eye-health/tips-prevention/do-color-blin...
Its gotten a lot better over the last few years. It wasn't that long ago I blacklisted their domain from google.
(1) It can be a fair chunk of your audience -- 1/10 men are colorblind in some locales.
(2) There are many flavors of colorblindness. Tools like https://www.color-blindness.com/coblis-color-blindness-simul... are helpful to make sure your palette works for most of them.
As a practical matter, adjusting some parameter like texture in addition to hue is helpful. If you adjust lightness or saturation it'll serve the dual purpose of making your charts understandable when printed in black-and-white.
For those doing web work, Chrome has a helpful way to simulate some of the most common vision deficiencies in its developer tools. From the menu, open the More tools → Rendering panel, then down at the bottom there is a setting called “Emulate vision deficiencies”. It can do blurred vision as well as several types of colour blindness.
Unfortunately, the linked to simulator, like many of the online simulators, does a very poor job. When simulating protanopia, reds should appear darker, due the lack of L cones. However, many simulators incorrectly display red as bright green instead.
I've also written a color picker that uses the Machado et al. method to enforce CAM02-UCS minimum perceptual distance for normal vision and color vision deficiency [2].
[1] https://www.inf.ufrgs.br/~oliveira/pubs_files/CVD_Simulation... [2] https://colorcyclepicker.mpetroff.net/
That seems like a very useful tool for planning new colour schemes. I wish there were more discussion and tools based on true human perception of colours, not just numerical representations that aren’t necessarily calibrated to how human vision works.
Of course, you can make the effort to construct a colour palette using a better model and then convert the colours. However, as soon as you start deviating from those carefully chosen colours — to build a gradient, or to apply filters or transparency, for example — you’re back to relying on the software to do the maths, and if its internal colour model is weak, the results will reflect that.
Can you share the specific resource you used? Very interested in writing something like this into my own project.
[1] https://www.inf.ufrgs.br/~oliveira/pubs_files/CVD_Simulation... [2] https://doi.org/10.1109/TVCG.2009.113 [3] https://colorspacious.readthedocs.io/en/latest/tutorial.html... [4] https://github.com/mpetroff/color-cycle-picker
For those who can't "see" it:
For people who have protananomaly, bright red (#ff0000) may look like `#cc0000` -- but it's clearly different from bright green (#00ff00) or gray (#cccccc).
Things get confusing with colors like pale brown (#997755) which may look something between fern green (#557755) and dim gray (#667755).
Fashion is significantly more limited and changes more often. Not that these basics can not change, but fashion refers to something still less stable.
Maybe some of these references are a starting point, idk.
(warning -PDF link)
https://scholarworks.umass.edu/cgi/viewcontent.cgi?article=1...
GrayScale = 0.299 * R + 0.587 * G + 0.114 * B
Grayscale tells you if the color is for foreground/background - it's something like the weight the color has.
When I had to pick (too many) colors manually I finally automated color picking by using the following rules - and never had to worry about this subject any more.
A) When combining colors it's good to have matching Gray-Values. (Otherwise one will dominate - you can also use this to make one color stand out)
B) Gray value of background and foreground should differ a lot.
C) Colors of similar gray value should not be picked too close to each other (obviously...)
The main theme of this article is to try to use complementary colors that aren't overly saturated or "pure", which is decent enough advice most of the time, but I feel that in an attempt to find color schemes that are more "professional looking", the author has used colors that come across as overly staid for most applications - navy blues and olive greens that are more associated with serious banking institutions then anything else. Which I guess is fine for infographics that need to display a level of trust and seriousness, but maybe not so much for a mobile app or social network that wishes to put on a more playful, friendlier face.
There's also the gender difference. Men are more likely to be colour blind, women are more likely to have better colour differentiation and also to have a subtly different colour hue perception. So women see subtle distinctions with more clarity, and see hues biased slightly away from red compared to men, with green being seen as slightly more yellow.
https://www.psychologytoday.com/us/blog/brain-babble/201504/...
A lot of the work in this area - including ColorBrewer - is by Cynthia Brewer, and I suspect that men and women don't just use colours and textures in a slightly different way, but are also attracted, convinced, and reassured by different colours and textures.
This absolutely makes a difference if you're working on a site that is gender-specific. Using a generic low-saturation palette is going to destroy the appeal of a site with predominantly male customers, while a black/brown/grey/red site will fail with women.
I've always been impressed by Apple's ability to make distinctive designs that bridge the gap and manage to be gender neutral. While most laptops are black and angular, an MBP appears to have no gender distinction of any kind. This is a very cool trick, and much harder to do than it looks.
The point being the target audience matters, and colour is a hard problem in design with a lot of context sensitivity, and certainly not something that can be reduced to simple guidance.
The author wrote the article they wrote. (For my part I thought the writing & layout were superb, and the content was very enlightening.)
I note that the author observed:
"Neon colors will definitely attract the attention of readers. But these readers won’t thank you. Most of us get a bit stressed out when we see them: “Highly saturated, light colors will NOT be appropriate [to communicate] Serious or Trust, or Calm,” as Bartram, Patra & Stone explain in their paper “Affective Color in Visualization” from 2017 (PDF)."
Another complain of mine is their statement to use yellow instead of green. But green has the connotation of "good" when paired against red, which it was in their example chart. Using yellow there would change the emotional feeling of the chart, in a way that would make it less understandable.
First of all, one advantage of highly distinct colors which is discouraged in this article is that.. the colors are more distinct across all sorts of mediums. Sometimes you don't know if your chart will be printed off on a cheap inkjet and showed to the CEO, or blurrily presented on a zoom call over poor WiFi to someone who is colorblind. I think the push to usability should consider these types of scenarios.
Actually this is precisely the opposite. If I understand you correctly, you're saying that the advice in the article -- to avoid super-saturated colors, super-bright colors, or colors evenly spaced around the color wheel -- is bad, because all these help increase distinctiveness.
But the reality is that when translating across mediums, like inkjet or black and white, these have the problem of blowing out, where light colors turn white and dark colors turn black. And with colorblindness, you encounter the problem of radically different colors becoming indistinguishable.
Whereas if you stick to less contrast but still maintain meaningful differences in both hue and lightness, it translates well across mediums. Shades don't get blown out, and levels of lightness remain distinguishable.
And as for colorblindness, the article specifically recommends using warm colors vs. blue precisely for this reason: "And they are accessible: colorblind people can easily distinguish blue and orange/red from each other." This is why you don't want to use the whole range of distinctive colors, like red, yellow, green, blue, purple all together.
To me these articles are like showing paralyzed man detailed physical explanation of walking, Boston Dynamics' robots, other people. Very informational and absolutely not helpful.
Probably some designers looking at software development tutorials feel the same.
I do a lot of watercolor, and it truly is amazing how much of our world is some shade of mud, and how far you can get with a couple of muddy pigments. Sargent did a lot of watercolor in sketches in Venice with just ultramarine, cerulean, raw sienna, burnt sienna, and a tube of white. James Gurney gets a lot of mileage out of the "six-pack" white, black, raw umber, yellow ochre, venetian red, and cobalt.
- https://blog.datawrapper.de/colorblindness-part1/
The justifications are mainly like this one: "That’s because these warm colors and blue are super versatile for categories." Or "First, forest green is just very dark. And lightening up the forest green means going into an awkward neon". This begs the question: "Why is green either too dark or awkward?"
I'm guessing this is due to us not understanding the psychology behind it; we fall back to rules of thumb.
What I'm trying to say is, there is some timeless wisdom here but there are also things that just boil down to conservatism and conformism. Infographics are subject to the constraints of bland corporate design.
The recent book "Data Feminism" discusses this situation:
'In the recent book A Unified Theory of Information Design, authors Nicole Amare and Alan Manning state: “The plain style normally recommended for technical visuals is directed toward a deliberately neutral emotional field, a blank page in effect, upon which viewers are more free to choose their own response to the information.” Here, plainness is equated with the absence of design and thus greater freedom on the part of the viewer to interpret the results for themselves. Things like colors and icons work only to stir up emotions and cloud the viewer’s rational mind.'
https://data-feminism.mitpress.mit.edu/pub/5evfe9yd/release/...
(I'm not saying Rost is a political dinosaur but I think she's catering to a pretty straitlaced audience.)
I discovered this in a fullpage advert decades ago, where the page was mostly hot pink, and the rather large letters in silver-grey.
That produced an optical illusion wherein the letters and the pink surface drifted apart from each other into infinity, maybe a dozen times per second, and swapping their positions from foreground to background. Almost puke inducing. And lasting for several minutes after, made my field of view "flicker".
Similar thing with the Mint which was trendy in the 90ies.
Brrr.
[1] The color blind focus is red-green in the descriptions. The author acknowledges other forms of color blindness, and I would recommend more emphasis outside of red-green.
[2] The tradeoff of visualizations is the visualizer guiding the narrative discussion and the audience wanting to triangulate additional information based off the visual. I have worked in organizations where the piechart (leading the "Avoid bright, saturated colors" section) would be reamed since there isn't enough visual difference between Laos and Japan. Especially in instances like line charts where this visualization methodology is used.
Beyond that, I felt like this was a well-written article on the subject.
However, I absolutely agree that there is no way for me to read that chart, other than looking at the order of the blue slices (they are in the same order clockwise as the legend).
I think one additional factor that should be considered when choosing colors specifically for presentations is "will the speaker be able to describe the color of one particular item based on its color, in terms the audience will understand?" For example, if you have to say "Japan is the ochre line" or "people 45 or older are the vermillion line, while people 20 or younger are the carmine line", that may be a problem in some circles, even if the two colors are easy to distinguish visually. This is likely not a problem when you have the option of saying "the darker red" vs "the ligher red", but if you start having more versions of the same general hue, you may quickly run out of words.
Edit : Perhaps someone can create a color selector that incorporates her recommendations, like avoiding primary or saturated colors, avoiding certain colors, etc.
Nadieh’s questioned green is much closer to “unique green” (a typical observer wouldn’t think it looked partly blue or yellow)† than the CSS color “green” (based on the display’s “G” primary), which is shifted way toward yellow and should properly be called “yellowish green” or the like. It’s also much less colorful (the hues would be easier to compare if both had the same colorfulness).
Likewise Nadieh’s red closer to unique red (and much less colorful) than the RGB “R” primary, which should really be called “orangish red”.
> Avoid pure colors
All three of the colors in the “better” picture are close to unique hues (yellow, blue, green). All three of the colors in the “not ideal” category are based on the display’s primaries (“orangish red” R, “purplish blue” B, “yellowish green” G), not at all close to “pure”.
†: Unique hues vary from person to person, and unique green in particular has wide inter-observer variability.
* * *
The extremely poor naming of CSS/HTML colors and the rather arbitrary constraints imposed by 3-primary RGB emissive displays and inadequate/misleading graphical tools for picking colors have seriously skewed many people’s color concepts.
To restate the main idea from this article: don’t use overly intense colors. Stay away from CSS named colors, because they are based on the furthest extremes of the display’s gamut, and are overly colorful.
I'm trying to do something akin to designing a terminal color scheme. I've seen some websites that let you put in values and see how the color scheme would look like, but I'm more interested in insight to how to make it look aesthetic. Colorblind friendliness is not a high priority.
I haven't found a tool that would help generating such palettes, so I built one for myself, feel free to use it:
I’m not sure what you are looking for in terms of emphasis, but if you want to work with lots of hues, I recommend looking into “perceptually uniform colour spaces”.
It’s not unusual to see a colour wheel with “pure” red, green and blue (in the RGB-on-your-screen sense) at angles of 0°, 120° and 240°. Then you “interpolate” and get yellow, cyan and magenta at 60°, 180° and 300°. More colours get filled in to complete the wheel.
Now, there are all kinds of things wrong with this. However, possibly the biggest problem is that you can’t just pick evenly spaced colours around a wheel set up like this, say ten hues that are 36° apart, and get a good set of perceptually distinct colours as perceived by a human looking at them. Go ahead and try it; you’ll find that some of the colours you get around the green part of the wheel appear much more similar than most of the others.
This sort of problem was recognised long ago by Munsell, who attempted through experimental research to find a way to represent colours where the steps appeared even to a human viewer. This resulted in the Munsell colour system, which is essentially a huge but quite useful look-up table that will give you perceptually even colours just by varying say the hue or value by the same number of steps. Later efforts by the CIE would try to codify those ideas in more mathematically tractable ways, and the CIE colour spaces in expert use today still have much the same ideas underlying them.
If you took a Munsell colour wheel and picked hues in 10 even steps around the wheel (for the same value and chroma), and then converted the resulting colours back to the bad but popular colour wheel described above, what you’d find is that the converted hues would have bigger changes in some areas, particularly around the greens, and smaller changes in others, which would compensate for the problem described above and give a more visually even palette.
This rabbit hole goes pretty deep, because this is already quite a long comment and I’ve only talked about hue so far. It turns out that getting perceptual uniformity on the other axes is not always trivial either, not least because the available value and chroma options differ from one hue to another: we can’t perceive any blue that looks anywhere near as strong as the strongest yellows we can see, for example. Depending on what your palette is for, this can be very important, because as others have noted, it’s a good idea to vary more than just hues if you’re trying to construct a palette of clearly distinct colours for things like drawing charts or other data viz work.
I had indeed noted experimentally that picking hues using regular spacing from the common color wheels doesn't work so well, at least not without varying the other components of color. I think for my purposes it will be enough to start with a Munsell-like group of distinct hues and tinker manually from there.
I wish more people made visualizations based on brightness rather than a hue scale.
https://jakevdp.github.io/blog/2014/10/16/how-bad-is-your-co...
I have found occasion to use Jet though, it's good for highlighting transitions between close values when the colour scale is large (but not large enough to use a log map).
The stricture “get it right in black and white” would help, but color-blind folks map colors to lightnesses differently. A color-blind co-worker believed yellow on white was perfectly legible, but a scatterplot with red and blue was indecipherable.
Do color blind folks have any tools, like browser plugins, to remap images?
Sometimes over-engineering gets you no where.
Having some degree color blindness is extremely common. Its depressing how designers just refuse to take this into account.
If you find yourself in a similar situation, I wrote a blog post on how such a palette can be calculated:
https://rentafounder.com/generating-colour-palettes-for-char...
The algorithm basically picks colours one by one, each being the most distant colour to all previous colours within the same saturation plane, all in CIE94 space.
It ended up working quite well.
But this article will help me make my own palettes for specific goals. A lot of categories have "common sense" colors (e.g., blues for male, pinks for female). Using those makes it easier for people to read charts without repeatedly looking at a legend or annotation. But I'd like to have the colors show multiple categorical variables. It should be just as easy to identify and compare white men versus white woman as it is to compare white men versus black men.
This sentence rubs me the wrong way for some reason but can't seem to articulate why. Maybe because I feel like in an ideal world, trustworthiness of information should not be coupled to how slick its presentation is.
I am reminded a bit of a jeff below story and a kissinger story.
Yes, although equally sometimes polish can draw attention away from a lack of substantive content
I agree that appearance shouldn't impact our trust, but it often does. If we showed up to a talk on investing, we might be surprised if Rapper 50 Cent took the stage. With his off axis baseball cap, his team jersey and gold chains, we might be questioning whether we should really listen to his investment advice... until he tells us he walked away with $7 million from one of his moves, or $60+ million from another.
On the other hand, if he had just walked out in khakis and a dress shirt, we probably wouldn't have questioned him before he spoke. Nobody is impressed by khakis and a dress shirt, but it's just enough that we don't question his trustworthiness, giving the data a fair chance to come through and be trusted (or questioned) on its own merit.
On the surface and without context, this sounds like an ideal, but it’s an interesting question and I wonder if you and I would really want that ideal. I’m not so sure that trustworthiness and presentation are separable nor whether I think they should be. Just Google “ugly web pages” and really imagine how many of them you could see yourself trusting. When there are clear signs that some information has had no thought put into the presentation, isn’t it reasonable and natural to start assuming that lack of attention extends to the information itself? Presentation is a very important part of how information is interpreted. It’s easy, for example, with bad color choices to accidentally emphasize one piece of data over another, and therefore to mislead the viewer - like how something yellow or bright green tends to dominate next to dark grey. By choosing colors carefully like in the article, the presentation can actually make the information more neutral.
An interesting followup question might be: what characteristics should make information trustworthy? What other cues should I look for in a presentation to know whether something is trustworthy? Ideally, the trustworthiness of information should depend solely on whether it’s true, right? But ignoring that there are points of view and shades of true, in the world we live in, we use other cues like who is the presenter and what are their credentials, whether we agree with the conclusions beforehand, whether we were seeking the information or it was pushed, whether the presentation is informational or agenda driven, and lots of other things... since it’s often impossible to know whether information is true or not without resorting to original research. What cues should we use to establish trust in information without having to do original research?
https://en.m.wikipedia.org/wiki/Physical_attractiveness_ster...
https://www.nngroup.com/articles/aesthetic-usability-effect/
The presentation of information is important. Not just the visuals, but even word choice. For example, you chose to criticize "professional" presentation as "slick", a word that more easily conveys a negative meaning.
Compare these two sites:
https://www.lifewire.com/best-rechargeable-battery-chargers-...
Before looking at the content, my bias is that the former is going to provide more reliable information.
https://www.nhs.uk/conditions/colour-vision-deficiency/
apparently there are other types in addition
Uhhh... no, I don't get how the end is more "beautiful". How do you determine what is a beautiful color combination, and what is not?
// We have a viz with 50 items; let's assign colours to those items:
import { palette } from 'supers';
const colours = new palette(50);
for (let i = 0; i < 50; i ++)
chart[i].css('color', '#' + colours.get(i, true));
Documentation: https://github.com/tripu/superscript/blob/master/.github/REA...
The next point key point it makes is to visualise hue on the colour wheel, particularity with reference to their antagonist pair (i.e. complementary). One point the author does not make is that artists, designers and Adobe Color define complementaries using the RYB colour wheel not the RGB. The complementaries defined by RYB are 'incorrect' in this regard.
Aesthetic arrangement of hue is easier to define as a set of don'ts rather than dos (which is why I disprove of Adobe color). Thing to avoid with hue use: hues from only one side of the wheel, hues from every point in the wheel and hues from equal sides of two halves of the wheel.
Having linear gradients of colours leads to the impossibility of distinguishing the data categories, so nop. If you do this you MUST also provide another kind of representation, like ColorAdd http://www.coloradd.net/ .
I've used Paletton before when trying to make a good colour scheme but I've never been impressed with the results. I guess I was using it wrong:
> In the video above, I used the color tool Paletton to start with a tetradic harmony and then decrease the distance. Note how more beautiful the color combinations become.
> Our colors are opposite each other on the color wheel, so they’re clearly complementary. Yay! But they’re also unusable: The two oranges are way too similar. And everything looks so... bright. There’s where we need to change the saturation and lightness.
I have a common type of red-green color blindness which makes red look less bright (protanomaly), and I can attest that your suggestions make the charts clearer for me.
He wasn't. He's colour blind.
Is this person a known designer? How seriously should we take their personal opinion?
cargo install pastel
pastel distinct 6Story: I have 2 USB cables, need it to make a longer one so i thought "let's get rid of the heads at one side, a bit of soldering of them wires and I'm golden. How hard can it be?". So I cut the sides, got rid of exterior isolation to get to individual wires and then i was like "uhmm, what colors are these?". So I called my wife "honey, tell me what colors do you see here?". And she comes, takes less then a second look at them and starts: "this is light blue, this is magenta, this is black, this is cream white and this is dark green". Me on the other hand I was seeing some weird green, a dark blue, maroon, yellow and light blue. And we start to bicker about colors. I swear to God, for an hour we went back and forth, involved the kids as well. Well my daughter sided with my wife while my boy sided with me. I end-up attaching post-it on each wire with numbers 1 through 5 and used my multimeter to identify which wire goes to what USB pin.
Conclusion: There is a reason why classic vibrant colors are used when you create diagrams or paths on a PCB - to easily identify who's what, not to play hide and seek. They might be boring but this is not fashion