Contrast Buddy

July 10, 2016

One Friday during our twice-weekly studio hours, one of my fellow designers mused that he wondered if you could quantify the vibrance and visual impact of a UI by comparing the contrast between adjacent pixels.

The idea struck me as interesting, so I spent the weekend playing around with Javascript-based image analysis and D3 making Contrast Buddy, a pocket-sized Javascript app that grabs a sampling of the pixels in an image, calculates some statistics about them, and graphs their relative luminance.

I don't know if Contrast Buddy lived up to its goal of providing an objective measure for screen vibrance, but it did teach me a lot. For example, how to calculate color luminance, how to dynamically generate a graph with D3, and the fact that you can do fun stuff with nary a line of server-side code.

Your color-sampling buddy