Colors in ALPS 3.x

Something that many people appreciate about ALPS is the variety of color themes available. It connects back to one of our key underlying principals of “Customization”. Each site has the option of using one of seven primary colors, two secondary colors and a light or dark background that allowed for many of color options.

Color is key to any design. We associate it with our brands and our culture. And as we approached ALPS 3.x, we wanted to build on the existing color themes. It was time offer more options. And some of the themes had accessibility issues, with contrast ratios making it difficult to read. Additionally, the use of the secondary colors in the current system didn’t allow for a lot of nuance in Call to Action buttons or links. It was binary, either a strong color or plain text.

Here are a few things we wanted to accomplish with the updated color system:

1. Expand color options
2. Improve readability
3. Better visual hierarchy

Keeping all this in mind, as we approached ALPS 3.x, we wanted to make some adjustments that would benefit anyone, but not negatively affect those who are using the 2.x system.

The New Colors

As we began working on ALPS 3.x, we took a careful review of the existing colors. Several of the combinations did not meet the WCAG AA contrast ratio recommendations. So we decided to take a second look at our color themes.

The new ALPS 3.x color system includes eight families, each family has a bright, muted, and neutral palette. Each of the colors in the family has been tested to ensure good visual contrast, offer guidance in the throughout the page, and create a discoverable interface. Each family has a key color and four supporting colors.

Bright

Muted

Universal Neutrals

Note: The colors highlighted above are palettes that were included in ALPS 2.x.