Color Considerations (Part 1)
In early 2013 I decided to dig a bit into how to use color in presentation slides and data-visualizations (online and offline) better. I always had a passing interest in visualizing data. Early on such data visualization involved the use of Excel spreadsheets (and sometimes a sprinkle of Visual Basic programming to automate the spreadsheets somewhat). But I also had a need to use color at time in PowerPoint presentation slides for one purpose or the other. We are talking roughly about the 1998 to 2003 time frame. From 2003 onward I also encountered color considerations for more and more web-pages of mine that again visualized all sorts of information. It is fair to say that I did read a number of books related to visualization of documents and presentation slides during the whole time. These books dealt mostly with design principles/considerations for page layouts, font types, size of fonts, and images. Book examples would be the "Non-Designer's Design Book" from Robin Williams or the "Presentation Zen" series of books from Garr Reynolds. But I also had read the cool books from Edward R. Tufte on data visualization principles from the early 90's and early 2000's. I really enjoyed Tufte's books and had the principles and examples memorized in my head or at least knew exactly where I had to look things up if I wasn't happy with a certain visualization for more ideas. However these books focused mostly on the shape of the visualization elements and less on color principles (I guess mostly because it would have made the books significantly more expensive to print).
The first eye-opener that there was more to this topic was when I encountered the "Technical Perspective: The Polaris Tableau System" and "Polaris: A System for Query, Analysis, and Visualization of Multidimensional Databases" articles in the Nov. 2008 Communications of the ACM magazine. Tableau is a paid for software application and I could not play with it. But the articles and especially their pictures gave me a number of ideas for future web-page data visualizations. Again it was mostly shapes focused and less about color, but still.
By 2012 I was in a state of unhappiness with regards to my use of color. While I did more and more data visualization web-pages on the side for projects that were used by lots of people, I did feel that I was in the stone age with regards to my usage of color especially in the web-page area. The default color palette offered by the Excel spreadsheet program to create documents was also not really exciting, but definitely looked a lot better compared to my self-programmed web-pages.
I once had to do a 15 minute PowerPoint presentation to upper management about a certain topic. I still remember being very happy with my presentation design. In that presentation I color-coded certain sentences green and other sentences red to emphasize top insights. The presentation was received well. However I did have a good rueful chuckle in early 2013 when I read that about 15% of all males world wide have green-red colorblindness or at least are green-red challenged. It really meant that about 1 out of 6 or 7 people in that room probably had troubles to see any emphasis when looking in real-time or later at the slide content. For arguments sake it could have been my Senior VP ;-). Beyond that I have encountered green-yellow-red color codes in most project presentations in some form or shape (filled circles or squares) following loosely a traffic-light pattern: Green, everything is a go, or going smooth; Yellow, everything is borderline (lets call it a challenge); Red, things are at a standstill or significantly behind schedule.
The RGB color space (Red-Green-Blue) is quite often the first concrete color related item that one encounters when using colors in programs. These days the 3 colors are most often represented via 3 numbers with a range from 0 to 255 (a byte in computer speak). In the 1990's PC graphic cards were more limited and the colors were coded with a range from 0 to 31 or 0 to 15. One can think of the 3 colors forming a cube with lets say the x-axis representing red, the y-axis representing blue and the z-axis representing green.
From a certain point of time onward I had a need to visualize lets say points representing some quantity. Normally one would use the x-axis or y-axis for that quantity, but in my concrete cases the x and y values were already used for other purposes. So I had at my disposal to use shapes (and shape-sizes and shape-rotations) or to use color. It was very natural as a programmer to use color: They offered an additional 3-dimensions (via the 3 RGB colors) and each color value could take 255 different values. The first time I seriously did this my co-worker and I realized immediately that the result was simply very bad when we looked at it and could not be used. But we never dug into why that state of affairs was.
The above example (a walk along the edges of the color cube from black to red, to yellow and ultimately to white) may not look so bad, but it certainly gets worse to differentiate if one doubles the number of different colors. Back then we even used a simpler version that was a direct line from the red corner to the cyan corner. Basically what I wanted to do was to compute some sort of an easy peasy color palette that offered a good "contrast" preferably in several dimensions using the RGB color space :-). The problem with the above example is that the "equidistant programmed" color steps between the individual colored cubes is anything else than perceptually "uniform" (for example the "distance" between the 2 yellows is much much smaller compared to the "same distance" between the orange and the yellow. However I was totally out of luck when I looked for an easy way out via searching the web for a suitable color palette. All I could find were palette proposals of 5 to 8 colors which were nowhere near what I wanted/needed. And nobody explained the rationale how they came up with the 5 to 8 colors in the first place. So it was no good.
In the early days of the web the graphic cards of the PCs and the various browsers were very limited. So a concept emerged of a set of colors that were supported everywhere. These colors were called "the standard 16 colors supported with the Window Video Graphics Array palette". Naturally I ended up using the 16 colors in all sorts of presentations and visualizations (simply because they represented some sort of a color "default").
While that might have been reasonable practice in the very early days, I never ventured much beyond that and continued to use that palette for a long time without a lot of understanding. All I knew was, that things somehow looked always being a bit on the "bright" side if I used a lot of these colors in a chart or on a given slide ;-)
I think the above gives a good idea about the mistakes I made and the problems I had when dealing with color. I continue this post with another post of what I actually learned :-)
The first eye-opener that there was more to this topic was when I encountered the "Technical Perspective: The Polaris Tableau System" and "Polaris: A System for Query, Analysis, and Visualization of Multidimensional Databases" articles in the Nov. 2008 Communications of the ACM magazine. Tableau is a paid for software application and I could not play with it. But the articles and especially their pictures gave me a number of ideas for future web-page data visualizations. Again it was mostly shapes focused and less about color, but still.
By 2012 I was in a state of unhappiness with regards to my use of color. While I did more and more data visualization web-pages on the side for projects that were used by lots of people, I did feel that I was in the stone age with regards to my usage of color especially in the web-page area. The default color palette offered by the Excel spreadsheet program to create documents was also not really exciting, but definitely looked a lot better compared to my self-programmed web-pages.
Some Bad Examples from my Past
Let me give some concrete bad examples from my past before I mention what I learned from my color deep dive.I once had to do a 15 minute PowerPoint presentation to upper management about a certain topic. I still remember being very happy with my presentation design. In that presentation I color-coded certain sentences green and other sentences red to emphasize top insights. The presentation was received well. However I did have a good rueful chuckle in early 2013 when I read that about 15% of all males world wide have green-red colorblindness or at least are green-red challenged. It really meant that about 1 out of 6 or 7 people in that room probably had troubles to see any emphasis when looking in real-time or later at the slide content. For arguments sake it could have been my Senior VP ;-). Beyond that I have encountered green-yellow-red color codes in most project presentations in some form or shape (filled circles or squares) following loosely a traffic-light pattern: Green, everything is a go, or going smooth; Yellow, everything is borderline (lets call it a challenge); Red, things are at a standstill or significantly behind schedule.
The RGB color space (Red-Green-Blue) is quite often the first concrete color related item that one encounters when using colors in programs. These days the 3 colors are most often represented via 3 numbers with a range from 0 to 255 (a byte in computer speak). In the 1990's PC graphic cards were more limited and the colors were coded with a range from 0 to 31 or 0 to 15. One can think of the 3 colors forming a cube with lets say the x-axis representing red, the y-axis representing blue and the z-axis representing green.
From a certain point of time onward I had a need to visualize lets say points representing some quantity. Normally one would use the x-axis or y-axis for that quantity, but in my concrete cases the x and y values were already used for other purposes. So I had at my disposal to use shapes (and shape-sizes and shape-rotations) or to use color. It was very natural as a programmer to use color: They offered an additional 3-dimensions (via the 3 RGB colors) and each color value could take 255 different values. The first time I seriously did this my co-worker and I realized immediately that the result was simply very bad when we looked at it and could not be used. But we never dug into why that state of affairs was.
The above example (a walk along the edges of the color cube from black to red, to yellow and ultimately to white) may not look so bad, but it certainly gets worse to differentiate if one doubles the number of different colors. Back then we even used a simpler version that was a direct line from the red corner to the cyan corner. Basically what I wanted to do was to compute some sort of an easy peasy color palette that offered a good "contrast" preferably in several dimensions using the RGB color space :-). The problem with the above example is that the "equidistant programmed" color steps between the individual colored cubes is anything else than perceptually "uniform" (for example the "distance" between the 2 yellows is much much smaller compared to the "same distance" between the orange and the yellow. However I was totally out of luck when I looked for an easy way out via searching the web for a suitable color palette. All I could find were palette proposals of 5 to 8 colors which were nowhere near what I wanted/needed. And nobody explained the rationale how they came up with the 5 to 8 colors in the first place. So it was no good.
In the early days of the web the graphic cards of the PCs and the various browsers were very limited. So a concept emerged of a set of colors that were supported everywhere. These colors were called "the standard 16 colors supported with the Window Video Graphics Array palette". Naturally I ended up using the 16 colors in all sorts of presentations and visualizations (simply because they represented some sort of a color "default").
While that might have been reasonable practice in the very early days, I never ventured much beyond that and continued to use that palette for a long time without a lot of understanding. All I knew was, that things somehow looked always being a bit on the "bright" side if I used a lot of these colors in a chart or on a given slide ;-)
I think the above gives a good idea about the mistakes I made and the problems I had when dealing with color. I continue this post with another post of what I actually learned :-)
Comments
Post a Comment