Computational Theming: Color

In Generative & Possibility space we're introduced to two terms:

In Designing Programmes, Gerstner explores a similar concept

“The parameters comprise sequences which are theoretically infinite but limits are, of course, set to them in practice. There is an upward limit to size and certainly a downward one... Within these sequences there are reasonable bounds; extremes set by technical and functional experience”

If we consider the task of picking text and background colors, how might we externalize our internal algorithms as designers? Can we use technical and functional experience to set reasonable bounds? How far can we collapse generative space in a way that increases the frequency of aesthetically appeasing designs, without limiting creativity and range of options?

Is it even worth investing in faster feedback loops for manipulating and previewing color options? If it was easier to navigate what was possible and what was accessible, would we see more creative uses of color across the web? How can we best design our components and interfaces for flexible theming?

We know we can compute the contrast ratio between two colors. There are lots of great tools to help check this score. In addition, we can compute if that number is above or below a desired threshold. But we wonder: what else can we compute? Because the possibility space for color is so large compared to other visual properties, it's often one of the most time consuming aspects of digital design. Using computational methods, how can we improve the quality of the output as well as speed up our creation process?

Let's start with a simple two color example: a block of text with a text color and a background color. There are more than 140 trillion (140,737,479,966,720) potential combinations of hex codes. If we looked at each of these options for .25 seconds and didn't take any breaks, it would take 1,115,689 years to glance at all of them. This number represents the total possibility space of hex code combinations. In this instance, our generative space is equal to our total possibility space.

A combination of random colors. Click or tap the example to regenerate.

86% of landing pages contain color combinations that fail accessibility requirements. But there's a simple solution to this problem. We can add a layer of computation and calculate whether the color meets an accessible contrast threshold or not. If it doesn't, we can regenerate a random color until this constraint is met. We're unaware of any accurate calculations of count of color combos for each accessibility threshold, but we can assume that it's lower than 50% of the total possibility space for a contrast threshold of 4.5. While all of these options might not be aesthetically pleasing, they are readable and pass visual accessibility requirements.

A combination of random colors constrained to contrast threshold of at least 4.5

One way to help collapse generative space is to define a color palette or theme. This can speed up the design process by limiting choice while helping to create a more consistent look and feel throughout a digital experience. Given a palette as an input, we can calculate how many total colors and potential combinations there are, as well as how many of those combinations are accessible.

The palette below has:
156 individual colors
24336 potential combinations
7,768 accessible combinations with a color contrast of 4.5 or greater

Color system comprised of 156 colors.

By only using colors from our theme we can collapse the generative space to 24,336 options, which would only take 1.69 hours to look through.

Combinations of random colors from the above theme file

We can push this a bit more by constraining options to only use accessible combos from within our theme.

Combinations of random colors from the above theme file constrained to a minimum contrast of 4.5

It would take 32 minutes to cycle through 7,768 options at .25 seconds per combination. Thirty minutes still seems too long, but it's a bit more manageable than 1 million years. We see that collapsing generative space has the potential to cut work time down substantially, even as it retains an expansive palette featuring hundreds of colors. The range of creative options is so wide, and the possibility of time saved so significant, that it might be worth investing in for your own design workflow. This is only one potential way to collapse generative space for generating text and background color combinations. In future posts we'll explore ways to apply computational theming methods to interaction states, shadows, borders, and more.