Over the past few years, IBM’s Carbon Design System and Brand Experience teams partnered to craft a universal color palette. A second iteration, set to launch with Carbon’s October minor release, meets all accessibility requirements of product design with the most subtle changes to the palette.

This cycling GIF highlights just how subtle the changes are in the latest version of the IBM color palette.

A team led by Mike Abbink and Sadek Bazaraa first put the palette together, which was released with the new IBM Design Language. Although the palette was built with accessibility in mind, potential improvements emerged as we tested it in product design. Some ratios across color families failed by one-hundredth of a point and there were a limited number of accessible text and background color combinations.

Here’s how we’ve adjusted the palette for accessibility in product usage, and a bit of history dear to our hearts.

Pass or fail: seeking nuance in a binary world

In large organizations like IBM, brand teams have long been responsible for creating and maintaining color palettes. As more and more people experience the brand through software and websites, this has begun to change. Screen-based products have become the environments where the colors are truly stress-tested, along with typefaces, grids, and any other foundational elements.

Even a hair of contrast difference can cause an interface to fail accessibility testing. IBM clients like governments and educational institutions depend on IBM to uphold WCAG standards, so we make accessibility a high priority in our color palette. This helps us maintain trust with our clients and users and reduce the risk of lawsuits by avoiding violations.

Let’s take a look at what a functional design system color palette looks like.

Grays with lighter lights, darker darks, and fewer mid tones

Neutral grays are essential in UI. They provide structure, denote boundaries, and establish a hierarchy.

When we design interfaces, it’s common to reach for extremes: the darkest and lightest grays. Maximizing contrast is key for readability and focusing a user’s attention. By including enough shades of gray in both ends of the spectrum, we prevent muddy mid tones with low contrast. This is especially important in enterprise software products, which can often be a mess of containers inside containers, panels flying over panels, and endless rows and columns of zebra-striped data tables!

The plot below shows how the contrast ratios between the grays fall roughly on a bell curve. As the bell curve gets thinner and taller, the light grays get lighter and the dark grays get darker.

Perceived dark and light theme symmetry

Notice the bell curve is not perfectly symmetrical. The right side is steeper and ends higher, suggesting steps between dark grays are larger than between light grays. This is to accommodate for the fact that our eyes are better at differentiating lighter shades than darker ones. To maintain a perceived dark and light theme symmetry, the contrast ratio between dark grays should be slightly higher.

The adjusted steps are still far from smooth. So far, we haven’t found a way to programmatically generate colors by inputting a custom contrast ratio curve. I love ColorBox, but I dream of a world where I no longer have to manually adjust the asymmetry between dark and light grays. (Wink, wink. Any talented coders looking to make a small web tool?)

Number of accessible text colors against theme backgrounds

Contrast is an important visual cue for communicating hierarchy between text and creating differentiation between headings, titles, labels, paragraphs, and captions. Keeping in mind text in user interfaces must be accessible, a color palette should offer enough accessible colors to create text hierarchy. In Carbon’s case, enough means five shades, which is half the row.

For example, on a Gray 10 background, colors 60–100 can all be used for text with an accessible contrast ratio ≥4.5:1. We generally do not recommend pure black or pure white for text because extreme high contrast actually compromises readability.

Before the palette adjustment, we had only four shades accessible on the Gray 90 background. This limitation forced us to use italics for helper text in the Text input component. We reserve italics for emphasis and glossary terms, so using it for helper text broke the system’s intent.

Following the palette adjustments, the helper text can be assigned Gray 60, with the label text assigned to Gray 80, and input text assigned to Gray 100. For anyone interested in additional details on this work, check out this thoroughly documented GitHub issue.

Mid tones should have high saturation and be accessible

Mid tones, in general, should be used sparingly. When they are used, they should offer a breath of fresh air. They are the highlights, the calls to action. They are accent colors and branding moments in a digital experience. They should command attention and provide character.

Carbon uses mid tone blues for primary buttons, the highlight bar on selected tabs, and progress indicators. This usage requires the color to be accessible with at least a 3:1 contrast ratio against the background, according to WCGA 2.1 standard for meaningful non-text elements.

We use mid tones for colored text elements such as links and warning messages. This usage requires the color to be 4.5:1 accessible against the background. Mid tones should be saturated to stand out from gray text.

Account for theme switching exceptions

The need for dark and light themes has increased in demand and become mainstream when building color systems. For Carbon, the complication comes with dark themes. Our button component’s dark theme implementation is not a simple inversion of background and text color. When you simply reverse colors and put dark text on buttons on a dark background, the readability can fall apart, especially with mid tones. Keeping button labels white maintains the user’s expectation of a bright, punchy call-to-action. This puts a squeeze on our mid tones. If the button background is any brighter, the white label will fail 4.5:1. Any darker, the button does not stand out against the background 3:1.

To solve this, we extended the darkest and lightest ranges ever so slightly. This gave the mid tones a bit more wiggle room while staying accessible on all fronts. The danger of doing this is that the extreme ends of the grays might not reproduce well on all monitors, projectors, and printers. We need a unifying palette, and we want to offer the safest colors to use for most use cases.

When all of these adjustments come together, you get a fail-safe structure for a family of grays. The contrast ratio intervals between the mid tones and extreme ends of the spectrum (which are the backgrounds) have to satisfy the following requirements:

1. Contrast between gray 60 and 90 has a minimum of 3:1.
2. Contrast between gray 60 and 10 has a minimum of 4.5:1.
3. Contrast between 50 and 90 has a minimum of 4.5:1.
4. Contrast between 50 and 10 has a minimum of 3:1.

After making big improvements to the grayscale, we applied the same brightness spectrum across all other color families.

What about data visualization?

Data visualization is the ultimate stress test of a color palette, as a palette needs to provide many differentiating colors that work for various modes of color blindness. Some systems choose to have a separate or extended palette. This is a huge topic in its own right, so I’ll save it for another post. Our work on restyling Carbon Charts is still in progress so look out for updates!

All you need, and nothing more

Too many colors can harm a user’s experience and a stressed product designer facing too many options can make mistakes. Garish, clashing color choices can create confusion and distract users from the job to be done. Poor color choices can even create a strong after-image when combined with prolonged screen interaction.

IBM hires a lot of early-career professionals, who appreciate guidance and embrace constraints. There are still many legacy products with poor usability and we are constantly adding acquisitions which do not share our Design Language.

Individual designers aren’t just designing interfaces. They influence product roadmaps, respond to clients, and work directly with leadership day-to-day. With big opportunities to focus on, it’s easy to miss the nuanced details of color usage and make mistakes. From the perspective of a design system, offering fewer color options discourages misuse and ensures harmony among products.

Limitation is not the only reason we reduced the palette from a rainbow spectrum to the current seven hues. The decision was driven by IBM’s brand philosophy, and this is where we’ll dive into a bit of history around the work that led us to the original palette.

Evolution of a color palette

IBM has existed for over a century, and the colors associated with the brand have been ever-evolving. You can easily spot the changing technology and the design intents that shape each of these color palettes.

Let’s get into the intents behind today’s IBM Design Language palette, and how we chose to express them.

Be essential

There is so much we love about the 1960s IBM machines. In the past, bold primary colors covered IBM's hardware and defined the future of business in an era where the possibilities of computing were just starting to unfold. Later on, in an effort to revitalize design at IBM, the color palettes expanded again and again, driven by an underlying theme of inclusiveness, rejuvenation, and progress. Today, the palette is sharply reduced to focus on communicating a point of view IBM represents:

We must assume that all products will be physically associated with each other, therefore, color and its application must consider our problem as a whole.

—IBM ID, Color Applications, Introduction, 1962

To be essential means the palette is intentionally minimal. There are only a total of 104 swatches, which breaks down to 10 color families, each containing 10 shades, black and white, a single shade of yellow, and a single shade of orange. If you rule out the grays, there are effectively only 7 hues in this palette.

Offering fewer hues makes the palette more usable. It provides direction and a clear point of view that scales across a huge company where designers are still a scarce resource.

Blue at the core

The whole palette remains blue at the core to pay tribute to IBM’s historical nickname, “Big Blue”. So blue was the first color picked.

The 2015 blue family shifts a little towards purple in the lighter end, and towards teal in the darker end. In 2018–9, the blue is refreshed to be more saturated, pure, and vibrant. This family of blues is potentially vibrant to a fault. To some, the new palette is an unpleasant experience, especially when viewed over a longer period. It was almost as if the effort to refresh the blue was too enthusiastic.

When adjusting the blue for products in 2019, we knew we had to reel it in a bit.

Even though the palette is designed with digital as its primary use case, (a Pantone palette is matched for print usage), the colors are pulled from the world around us, both natural and machined.

Effortless harmony and scale

After the blue was picked, it became the central axis for all other hues. The hues furthest from blue in this palette are the reds and greens. They are equidistant from the blues to each side. Any color outside this range was eliminated due to the disharmony they created. The result is a selection of hues all tightly associated with the blue hue.

With a little bit of blue in every hue and fewer hues in the palette, it is hard to put the wrong colors together and easier to stay on brand. It is exciting to create harmony, and the palette’s usage guidance can be significantly simplified.

The impact of the new palette is evident. Almost every combination of the colors looks fresh and modern. It gained an instant fan base in the illustration channel in Slack. Just explore the IBM Design gallery page, or these community Dribbble shots, or these gorgeous app icons designed by Peter Garvin.

Functional and accessible

At this point, we come full circle back to the collaborative work between the design system and design language teams. This collaboration was made possible by IBM’s culture of ample mutual respect for each designer’s expertise. After all, a color palette constructed with features and guidance to ensure accessibility is more empowered to express brand philosophy.

With the latest release, we’ve finally arrived at a confident, stable palette that supports brand experiences on all fronts.

Closing note

This is the end of the story of the making of a color palette. I’ve learned so much in this work and I hope you have too from this article.

Tweaking a hundred and four shades of colors is like tweaking all the distances between hundreds of dominoes—a manual, tedious, and time-consuming process. But when the palette is done, and a logic of usage securely in place, it is amazing how much it simplifies everyone’s life.

I believe many designers out there, like me, secretly hold a love-hate relationship with colors. I encourage you all to try and tame this beast. Because, after all, colors are worth it. Colors are beautiful.