The Color of Money
How OpenGov Design uses color to help local government tell the story of their spending and services
OpenGov recently introduced new colors on our intelligence platform for government. We’ve received positive feedback on the colors, along with some superb questions about the choices we made, so we’d like to share a bit about how color can improve visual communication and some of the fun and helpful resources that we stumbled upon during this process.
Design is a blend of art and science
Color design in particular stretches the — ahem — gray area between the fields. The topic of color is emotive and personal and even thought the latest science and tools help, we have to trust our eyes.
Visuals in government reports tell the story behind the numbers.
Color — one of the most important visual elements — helps readers understand information at a glance, and it’s particularly helpful for people who think visually. At OpenGov, we are lucky to work with folks in local government who are incredibly skilled with statistics and spreadsheets. They can scan tables of numbers, do math in their heads, and even understand government finance and accounting. Colors and visuals can help augment these abilities, helping them to spot trends and make decisions. Because local government reports contain large amounts of information, it is a challenge to balance the signal versus noise. One of our customers recently told me about a very colorful and nearly illegible report she had no choice but to rely upon: “It looked like Walt Disney threw up!” The message was clear: Poor color choices and lack of discipline can ruin any good chart or story.
“It looked like Walt Disney threw up!”
The design team at OpenGov loves color
Our internal review of the colors used in our graphs came from two places: one aesthetic, one pragmatic: We wanted to share beautiful colors with the users of our products, and we wanted our choices to help them better understand what they were looking at. We started by collecting and sharing good examples of using color to delight and inform. Here’s a Pintrest collection of things that inspire us.
Nevertheless, loving color doesn’t mean we use it everywhere. It’s a precious resource and must be used with care and purpose. Colors send strong messages to our brains that we associate with emotions and information. Nick Babich writes about the various feelings we associate and experience with color. Color can be calming and trust-building or it can put us on high alert. Speaking of caution, that is Edward Tufte’s first recommendation when using color:
“The often scant benefits derived from putting a good color in a good place is a complex matter. Indeed, so difficult and subtle that avoid catastrophe becomes the first principle in bringing color to information: Above all, do no harm.” (Tufte, Envisioning Information, 1990)
Paint the town grey
This led us to the next step in our process: make it grey. There are countless considerations to make when designing information on paper or webpage. When working with color, the first step is to consider the message and hierarchy of the page. Whitespace and visual order are the foundations of good tables and graphs, so one of the best tools for using color is to actually get rid of all of it. Making Grey Your Best Friend is a good approach. Designing in black and white also helps us see the shape of the page and the contrast between elements.
“Grey has no agenda. . . . Grey has the ability, that no other colour has, to make the invisible visible.” — Roma Tearne
Bring the rainbow back
Once we have a good composition, then we need to think about what colors will help to bring life to the design and communicate key pieces of information. We must ensure that our aesthetic choices align with the science of how people interpret information and don’t distract from telling the whole story. This is where color plays its largest role. Color works well for representing the relationship between data values. The type of data we’re working with helps us to select the best color scheme. For example, a red-to-green color scale works well for a diverging bad-to-good scale, but not for a categorized list of equivalent items.
As a team of engineers, designers, and data scientists, OpenGov uses the latest technologies and science to precisely visualize how public money is spent and government services are delivered. Where does money come from and how is money allocated? How does it flow over time? How is it spent?
One of the most powerful features of OpenGov Reporting is the ability to group or pivot government data by organizational structures, such as departments, programs, or the geographical distribution of services. My colleague Gurdas Nijor recently wrote about how we bring order to the complex world of government operations and related data. For instance, a citizen can compare the total money spent by the Parks Department or Public Works or find out how much these departments spend on maintaining parks versus sidewalks.
These are categorical proportions of money. Our charts size the area of pie, bar, or flow charts to visualize the relative amount of money for each category. (Here are some data visualizations types that work well for proportions.) We use colors to differentiate the categories, but we don’t want to over emphasize one fund, department, or service type over another. Fortunately, there are color scales and tools that work well for this problem.
We used a number of tools to discover the best color scheme. Check out the list at the end of this post. One of the most powerful tools is Color Brewer, which applies the research of Cynthia Brewer, a geographer and cartographer at Penn State, on color selection for maps and data visualization. We used Color Brewer to help select a qualitative scale of 20 colors.
We also used Chroma.js to prototype a number of data visualizations with our sets of colors and discovered that a palette with subtle color saturation and contrast improved the overall aesthetics of the visualizations. We also tweaked the color order so that smaller proportions we differentiated, especially for viewers who have trouble preceiving color. Here’s how the same visualization might look to someone who is vision-impaired:
Here are the results of our work.
We’ve used color science to select a color logic that achieves the goals of the data visualization. Then we prototyped the visualization with our application UI and blending the colors with our existing palette.
This is just one example of selecting colors in the design process. The process works well on all projects.
- Consider the audience of your presentation, report, and visualization.
- Consider the most important information on the page or chart before adding color.
- Consider the type of information or data and how color will make it easier to understand.
- Prototype with real data and see if it works.
- Show the colors and design to your audience.
Thanks for reading!
Here’s a list of some of the resources and tools mentioned in this article. Plus some fun places to play with color.
Tools for working with color:
- Color Brewer — If you need colors for a chart or presentation, go to Color Brewer.
- Adobe Color — A tool for picking color schemes
- Color dot — A web-based color picker that is fun to use
- Colors from Films — http://thecolorsofmotion.com/films
- Chroma.js — A Javascript library for working with color.
Books and Web Resources for Color
- Color Use Guidelines for Mapping and Visualization, by Cynthia A. Brewer
- Colorist: A Practical Handbook for Personal and Professional Use, by Shigenobu Kobayashi
- A Fieldguide to Digital Color, by Maureen Stone
