Accessible Rainbow

In 2025, Postman launched an updated Published Analytics experience. The goal of this project is to show the value of Postman to publishers as a distribution platform for their APIs. Today, I want to talk about how I approached the fundamentals of visual design for this page.

Layout

My first question when designing a new page for an existing product: What can I reuse?

If you look at Postman API Network pages, you likely noticed that no page looks the same. This increases cognitive load when navigating the app: each time one needs to re-learn the structure of the page, new patterns and components, and what’s most important.

So, for the layout, I had two goals:

1. Make the new page look consistent with the rest of the app.
2. Potentially use it as a foundation for upcoming pages.

I created a basic layout for the Analytics page:

Nothing special. Just a page header, sub-headers, and a bunch of cards. Thankfully, some guidelines for layout already exist in our Aether Design System.

All margins, headings, paddings, and borders are straight from the design system. Cards are inspired by the cards on other pages — no rocket science here (although we are all Postmanauts).

(Aether does have cards, but those are a little limited in functionality.)

Simply reusing this page width and headers in the future can also make the API network product experience much more consistent.

Color

Color is one of the key components that helps understand data. It’s an easy mistake to think about infographics as a place to demonstrate your brand colors. It may even seem obvious at first: a brand color sometimes plays a massive role in brand aesthetic — and data visualization uses a ton of color!

Aether does have color usage guidelines, though they do not cover infographics.

As a designer, I need to ensure that the graphic I create is friendly for the viewer. This means that it’s easy to understand, doesn’t distort data, and promotes curiosity. It also means that the colors should be perceived by the audience in the intended way.

Color Dimensions

When choosing colors to use (Postman design system has pretty much all of them), I considered three dimensions that a color can have in an infographic.

First Dimension: Value

The first dimension represents value. It will always be the most prevailing color among charts. And it should not have any meaning behind it. I deliberately chose not to use Postman Orange. Oftentimes, orange signals that something needs attention, and overuse of this color may increase eye strain. Instead, I chose blue, as the most neutral color in every culture.

Second Dimension: Category

The second dimension is used for categorization. This is where color starts to become more meaningful and helps distinguish subsets of data. It becomes paramount that all viewers can easily distinguish these colors. Order matters too. If two similar shades are close to each other in a bar chart, they may be unintentionally perceived as related.

There are two ways in which people distinguish various colors: contrast (light blue vs dark blue) and perceptual difference (how different colors look from each other). While contrast for color differentiation works universally the same, perceptual difference may be pretty subjective.

Centuries ago, there was no strict system for classifying color groups — it was shaped by culture and language. Still, studies show that people around the world often divide the color spectrum in similar ways, likely influenced by shared aspects of human biology. And globalization has made color categories more standardized. Yet, some nuances remain.

In East Asia, for a long time, there were no different terms for blue and green. Although in modern Japanese, there are blue (青, ao) and green (緑, midori), the word ao is still used to describe the “go” signal of a traffic light.

A Western person may look at the graph below and clearly distinguish three separate categories. At the same time, a person from East Asia may think that Subcategory 1 and Subcategory 2 are related.

Growing up in Ukraine, I was surprised to learn that in English, there’s no distinct word for light blue in the basic color palette. In Ukrainian, when we describe colors of a rainbow, we use different words for these colors: synii (синій, dark/standard blue) and blakytnyi (блакитний, light/sky blue). Although we consider them separate, they are still related—not completely distinct categories like blue and green.

Third Dimension: Cultural Meaning

In many cultures, cooler colors like blue and green are commonly associated with calm and good, while warmer orange and red colors are used to grab your attention, warn about danger, or show something as negative. So it’s a great way to quickly convey a partial meaning of data without providing additional context to a viewer.

This is an air quality map of North America. Without looking at the legend, you can probably easily guess where the air is better (it’s a wildfire season in the Northeast).

Red = bad. Green = good.

Yet again, not the case in all cultures. In East Asia, the color red is associated with luck and prosperity. It’s commonly used to show something positive. That’s why when you look at Japan stock market photos, you’ll notice that colors for positive and negative values are the opposite of the Western ones.

Accessibility

Finally, when considering color and its combinations, accessibility becomes paramount. About 5% of the population (8% of men and 0.5% of women) have some form of reduced color perception.

There are several forms of color blindness, with the most popular being deuteranopia, or green-blindness.

Creating a Color Palette

Let’s bring everything together. The color palette for infographics should:

1. Be neutral by default.
2. Should be accessible.
3. If a color has cultural meaning, it should not solely rely on cultural preference.

To make colors as distinguishable as possible, I choose them in a way that spreads around the color wheel (all part of the design system). I also ensured that they have slightly different brightness to enhance the perceptual difference further.

As I mentioned, the order of colors matters. Especially when you use bar charts or pie charts with multiple subdivisions. So let’s see how it looks if I place these colors in an order that they are on the color wheel.

Subjectively, it looks alright. Who doesn’t like rainbows? Yet, there are a few potential problems here: blue and green, yellow and orange are next to each other. They may be perceived as related to each other. And I intend to make a universal palette that doesn’t convey additional subtext.

Let’s see how a blue-blind person might see this.

Thanks to differences in brightness and saturation, I can see different categories. Yet there’s one large group of yellow-ish colors in the center. Even though most colors for people with deuteranopia will be seen as shades of blue or yellow, we can still improve the perceptual difference with the proper order of colors.

I created (well, vibe-coded) a script that allowed me to test different color combinations for maximum perceptual distance. It works in the following way:

1. The script converts into L*a*b* color space. It’s designed to model a human’s perception of color and describes a color with three numbers:
   1. L = lightness (0 is black, 100 is white)
   2. a = red-green axis (–128 is red, +127 is green)
   3. b = yellow-blue axis (–128 is yellow, +127 is blue)
2. Then, the script calculates the distance between every two-color group with a magic formula (I’m not going to show it here, but math nerds can look up Euclidean distance and CIELAB ΔE*). Suppose red = –128 and green = 127; the distance between them is 255. The greater the distance, the more different colors are from each other.

3. Finally, I added a sorting function. It tests the five pre-defined colors in all possible sequences (120 total) to ensure the maximum combined distance, ΔE. This will be our score.

Let’s check the score for the initial color sequence:

For these colors, this would be the lowest score possible: when you sort colors like a rainbow, each adjustment color would be very close to its neighbors.

Next, let’s see the best case (per sorting function):

This is the maximum possible score for these colors. Yet, as I mentioned, I want the blue color always to be the first in a default sequence.

Let’s make some adjustments. I’ll move the orange to the beginning and reverse the order:

This combination has only a slightly lower score (84% on a scale from 455 to 542).

Let’s see how it would work for green-blind and blue-blind people:

This palette should work well. It’s neutral and accessible. It can be freely applied for use cases when categories do not imply that something is good or bad. Notice the 1px lines in between the color blocks of the bar chart: they further help separate different categories.

And when we need to show something good or bad, the chart legend will help explain which color represents which data (the alternative would be to implement region-specific themes).

The process doesn’t end here. We have already started testing prototypes with users. And we will continue to iterate on this as we see how our patterns and colors work with real data. But that’s a topic for another discussion.