Background

Historically, Codex has created and added colors on an as-needed basis. Most recently, the color palette was reworked to meet the immediate needs of dark mode support.

In practice, this meant squeezing in values within specific colors, resulting in unique -50 values which don't exist consistently across the spectrum. This squeezing in of new color values added to the existing challenge of having a variety of color contrast ratios within the same value. For example, the contrast ratio of the current 500 values against a white background differ wildly between colors.

This approach has resulted in an uneven and restrictive palette which has prevented the Design System Team from effectively tackling color-related accessibility issues and resulted in a backlog of design debt.

As seen in Figure 1, an audit of any tokenized color values derived from Codex as well as mobile apps, there is a sporadic group of colors across a wide spectrum.

Figure 1

Figure 2 show the colors the colors which were defined in Codex only, which was a more limited palette.

Figure 2

As a part of the Dark Mode work, the Codex color palette was expanded to meet the needs of and to support dark mode, as seen in Figure 3.

Figure 3

Figure 4 shows the future expanded palette as explored in T360494.

Figure 4

Opportunities

• The expanded color palette will allow us to address longstanding accessibility issues (T371117) and design debt (T370644, T370663).
• With a broader range of intentionally determined colors to choose from, we are better positioned to address how we want to handle things like diffs (T333681).
• Reordering the entire spectrum could help create a more cohesive set of numerical values which are consistent across all colors.
• Expanding the color palette and continuing filling in the gaps seen in the previous Figures would enable us to realign values to find consistent contrast ratio across colors. This allows us to more easily and confidently make color decisions based on blanket contrast ratios we can establish in the creation of the revised palette.

Drivers

Design: @DTorsani-WMF
Engineer: @Volker_E

Goals

When considering a broad expansion of the color palette, there are a few goals to keep in mind:

• We want to be able to meet potential future needs, such as apps using the Codex color palette and modes seen on the mobile apps like sepia.
• We want to continue to optimize readability for colors used primarily in dark mode. This means instead of trying to match exact contrast ratios found in light mode, likely having slightly less contrast [while still meeting accessibility criteria] to optimized for a less saturated reading experience.
• When possible, and in light mode specifically, we want to maintain a contrast ratio of 3:1 between all link colors and the base text color.
• Create the opportunity for theming through the consistent alignment of values, which also helps foster the standardization of text colors on background colors, like in T361508.