Where does the checkerboard transparency grid come from?

Solar cells, photoshop and cuttlefish

I love colours. But, I’m terrible at choosing them.

While writing an article on “What colour should your Figma boards be?” I switched off all colours on the background of my Figma board and noticed the classic checkerboard background.

This left me with two questions:

Why is the checkerboard pattern so ubiquitous in editors? and when did it become a standard?

What is the Transparency Grid?

In case you’re unsure, when I say transparency grid, we’re talking about this pattern below.

Checkerboard examples

You’ve probably seen them when downloading a .PNG image that you thought was an SVG image or more likely when opening up a blank Figma/Photoshop editor.

I knew it as that checkerboard thingy. But Photoshop and Figma, have a fancy name called the Transparency Grid.

Finding Transparency Grid

The first (and easiest) thing to do is look back in time to see where the “transparency grid” comes from.

From Google Ngram, we’re looking at the name popping up in 1960 -2000.

The First Spike: 1970 -1980 — Photovoltaic Solar Tech

There is a heap of NASA and Jet Propulsion Laboratory references between 1960–1980 our first spike in the graph.

Most of these are studies around using a “transparent grid” to increase efficiency in solar cells. Cool, but not quite the transparency grid we’re looking for.

P.S. Science nerds did you know the JPL has some weird occult origins?