An attempt at better data visualization: Using shading in a table

Sometimes, it doesn’t take much to make a table easier to read. Here’s an example where just a bit of shading might help more readers understand a table.

I was copyediting an article and came across a table that looked like this.

	Treatment (vs. control group)
Outcome	A	B	Both
Happy	+	++	+++
Satisfied	+++	0	+++
Fulfilled	++	0	+++
Irritated	–	+++	+++
Sad	0	++	++
Disappointed	+	++	+++
Sleepy	++	+	++
Itchy	++	0	++

There’s nothing wrong with it. It’s clean, the meaning of the pluses and minuses were explained in the caption (this example is nonsensical of course), and the columns made sense. But the light vertical and horizontal lines, including the minuses and pluses, look alike, so I had to look closely at each cell to make sense of it.

Adding a bit of shading to convey meaning

A little shading could help more readers quickly see which combos have the strongest relationships. (I’m sharing a screenshot because I don’t know how to shade individual cells on this blog.)

What I did:

• Got rid of the horizontal lines. (Although the first column could be narrower to make sure each Outcome is close to its values. Design principle “Proximity”)
• Shaded the cells: the strongest relationship is darkest; no relationship (0) is white.

I realize now that I don’t know whether the dash or hyphen means a negative relationship or it wasn’t measured. That’s something to query the author.

Accessibility check

In terms of accessibility, I used Claude and ChatGPT to adjust the HTML code for the first table so that the complex header rows were labeled to align with WCAG.

The shading adds an alternative way for readers to understand the information in the table, but colors are not the only way the table can be understood: the cells aren’t empty but contain text that can be read.

See also by accessibility expert Sheri Byrne-Haber: Accessible Color Choices Are About So Much More Than Just Contrast

However, both Claude and ChatGPT outputs indicated that a screen reader would probably read out the pluses and minuses. We’d have to find a better way to express the relationship strength. In this example, maybe writing out very strong, medium, weak, and none would work.

---

What do you think? It was beyond my remit to suggest more than basic edits in the actual article I was copyediting, but I enjoy suggesting how authors and organizations may create better visualizations.

If you want to know how you can improve your visualizations: 4 ways to make charts that tell your story.