Interaction of Color, for people who make charts

In 1963 Josef Albers published a book with a claim that sounds like a magic trick: the same colour, printed once, can be made to look like two completely different colours. No ink changes. Only its neighbours do. He called it the interaction of colour, and he taught it not with theory but with hundreds of paper exercises where students discovered, with their own eyes, that they could not trust them.

I make charts and dashboards for a living. For years I chose colours the way most people do: pick a nice hex, check it looks fine, ship it. Albers is the reason I stopped. Because the moment a colour lands in a real chart, it stops being the swatch you approved. It is now sitting next to a dark background, or a red alert, or eleven other categories, and it has quietly become something else.

Here is the effect, live. Both squares below are the exact same colour. Drag the backgrounds, then hit the button to slide them together and watch them fuse into one.

Demo 01Simultaneous contrast both chips = #5B9E8E

Left field warm sand

Right field deep pine

What you are seeing. On the light field the chip reads dark and slightly warm; on the dark field the same chip reads bright and cool. Your eye judges a colour only in relation to its surroundings, never on its own.

01The swatch you approved is not the colour they see

This is not a curiosity. It is the single most common way charts go wrong. Your brand teal looked confident on the white spec sheet. Then someone drops it into a dark-mode dashboard, and the identical hex now glows like a neon sign, louder than the number it is supposed to serve.

Same colour, two dashboards. Look at the bars:

Light dashboard

bar = #17B0A0

Dark dashboard

bar = #17B0A0

Identical bars, one hex. On white the teal sits back and behaves. On near-black it advances and shouts. If you tune a palette on one background and ship it on the other, you shipped a different chart than the one you tested.

To clarify, add detail. Clutter and confusion are failures of design, not attributes of information.

Edward Tufte

Tufte is talking about density, but the lesson rhymes with Albers: a design fails when the maker mistakes their private view for the reader's. You saw the swatch in isolation. The reader never will.

02Contrast is a relationship, not a property

The same trap hits text and thresholds. A colour that is perfectly legible on white can quietly fail the moment it lands on a tinted panel, and accessibility is not a property of the colour, it is a property of the pair. Here is the same teal label against four grounds, with its real contrast ratio:

One colour, four verdicts. #0B7A6C passes comfortably on white and fails on a mid teal. The hex is innocent; the pairing is guilty. WCAG AA for normal text needs a ratio of at least 4.5 to 1.

03What Albers means for a protocol

If a colour has no fixed meaning until you see its neighbours, then a design system cannot ship colours as hex values and hope. It has to ship them as roles, accent, warning, muted, and bind those roles to real values per context, tested against the ground they will actually sit on. Retheme by swapping the bindings, not by hand-nudging a hundred swatches.

That is not my invention. It is Albers, sixty years later, wearing an engineer's coat. It is also exactly how I built colour into OVP: specs reference a role, each design language binds the role to a value, and a contrast gate checks every pairing before it can ship. The old master with his paper squares would have recognised the whole thing.

Read the source. Josef Albers, Interaction of Color (1963). Do the exercises with real paper if you can; the point is to be fooled by your own eyes, then learn to distrust them. This essay recreates the principle with original demonstrations rather than reproducing Albers' copyrighted plates.