FOUNDATION
Creating the Goldman Sachs Color Design System
Rooted in thorough research and testing, our new color system is designed to be:
Versatile and Robust.
A comprehensive set of colors supports theming, data visualization,accents, and complex UI components.
Optimized for Accessibility.
Every color ramp has the same level of contrast across each swatch. This consistency makes it possible to adhere to a WCAG-compliant AA accessibility rating.
Consistent. Everywhere.
No matter how varied our products, our color system supports a unified appearance.
Scalable to What You Need.
The color system can be extended to existing implementations — without breaking anything.
Like any worthwhile effort, this color palette is the result of much trial and error. Here's the story of how we built the Goldman Sachs color palette.
Using the hue, saturation, and brightness (HSB) model, we selected a range of hues and experimented with saturation and brightness to arrive at an initial palette.
And, hooray, we were off! Right away, though, we saw that these colors had unequal contrast ratios across lighter and darker bands. The contrast also varied too widely to meet AA accessibility standards. We needed more consistency.
Shifting the palette to grayscale exposed the wide variance of color contrast from one color ramp to another.
To normalize the contrast ratios, we chose a single hue for each color ramp — except amber. Compared to others, amber is a very bright color and difficult to make contrast-compliant.
This gave us the increased contrast consistency that we wanted, but not all colors were aligned across all ramps.
Using HSB as the color model allowed for a more systematic approach to creating colors than other models (such as RGB or hex).
We started by dividing the hue spectrum into selected slices to group and identify ranges of colors. Twelve colors gave us enough coverage across the 0-360 range, forming our base set. This met the needs of a large system without being overwhelming. Some hues were maintained, such as blue (hue: 215), which is the Goldman Sachs primary interface blue.
Next, we turned our attention to consistency and accessibility, which were top priorities. To meet WCAG guidelines for color contrast that achieves a level AA compliance rating, the contrast ratio must meet a minimum level of 4.5:1 for small text and 3.1 for larger text.
In testing brightness, anything less than 15% brightness on the dark end was too hard to distinguish from pure black. More than 95% brightness for light colors became too light to see
With our base (50 & 60) and end points (10 & 100) identified, brightness percentages were distributed incrementally across the ramps, with slightly tighter increments at either end. This created precise ‘target contrast ratios’ to aim for when creating each color ramp for each swatch.
We established a base color ratio for both black and white text, giving an even amount of ramps for light and dark text. Lighter colors (10–50) pass on dark text, darker colors (60–100) pass on white text. This is the template that forms any color swatch we create.
Applying the same contrast ratio for each color ramp across each swatch ensures consistency across swatches. For example, ‘Color 60ʼ has ratio 5.1.
A consistent contrast ratio gives us the value of having a system where any combination of foreground and background colors from different swatches lets users quickly determine successful compliant contrast ratios.
If the difference between two colors on the swatch scale is 50 or more then it will meet the WCAG AA contrast ratio guideline (e.g., ‘gray 70’ text color will always pass accessibility with any color ‘20’ in background).
Manually adjusting each saturation and brightness value in Sketch achieved the closest match for the desired contrast ratio for that swatch. We also used the Stark Contrast plugin to check text color against background color to ensure accessibility.
Stark Contrast plugin
Once complete, every color within a color ramp has a consistent amount of light and contrast.
We tested different color variants: higher vibrancy vs more muted, cool vs warm colors to see which worked from a technical and visual aspect. We found the saturation of lighter swatches in each ramp were generally too high. Through various testing we reduced this and kept the mid range swatches in each ramp higher saturated.
- Initial palette was too saturated and bright at the lightest end of each swatch. The colors stood out too much.
- Reduced vibrancy of colors at the lighter end of the ramp.
- Vibrant colors worked best in the mid to dark range ramps for swatches.
- Red hues worked better at the warmer end of the spectrum. Cool reds tended to go ‘too pinkishʼ at the lighter end of the ramp.
- Green worked better with a cooler hue and balanced better visually with other hues.
Finally the brightness and saturation levels were plotted across a graph to spot discrepancies in ramps for each swatch, and spaced more naturally across the curves to give greater consistency and distribution. This also allowed us to reduce the saturation across most of our color ramps.
And voila, the new color palette!
Investing the time to create a consistent and scalable color system has enabled us to address one of our major foundational design pillars.
Accomplishments:
- A fully accessible and consistent color system to build multiple apps across multiple spaces within Goldman Sachs.
- A color palette that is robust and versatile enough to support all design needs (future theming, data vizualization, etc.).
- We can easily integrate more colors if needed by using the system created.
- Designers and developers can discuss and reference color more efficiently as part of our workflow.
Contents