History

Historically, Codex has created and added colors on an as-needed basis. The gray palette has been the most expansive of the available colors. The "middle" blue #36c has been the most pivotal color as it is meant to serve as the progressive color (such as for base links) and meets a 3:1 contrast ratio on the darkest gray #202122 in the legacy Codex color palette (tokenized as gray700), used for default text in light mode and a 4.5:1 contrast ratio on #eaecf0 , tokenized as gray200 in the legacy Codex color palette, the darkest gray used for backgrounds in light mode.

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

Opportunities

• Since the now expanded Codex color palette was done to meet the immediate needs of dark mode support, the broader color palette could use an assessing, during which T308772 could be visited.
• With the addition of specific values within certain colors came the squeezing in between existing values, which caused the need to add a unique -50 value which doesn't exist consistently across the spectrum. Reordering the entire spectrum could help create a more cohesive set of numerical values which are consistent across all colors.
• To add to #2, the squeezing in of the new color values added to the existing challenge of having a variety of color contrast ratios within the same value. For example, the 500 value of the colors and their contrast ratio on white can be found in the table below. 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.

• The expanded color palette will allow for us to write more informed guidance for things like data visualization (existing internal draft) and enable us to address T269138.
• As a part of this work, we can address tasks regarding updating application tokens, such as color-subtle in T335225, disabled colors in T341357, and updating interactive states of buttons and links which would improve accessibility in the hover state of said items.
• With a broader range of intentionally determined colors to choose from, we are better positioned to address how we want to handle diffs, referring to T333681.
• Another task related to color that might need addressing as a part of this work is T360053.
• This update to the color tokens would encourage an update to how tokens in general are displayed on the Codex docs site (such as colors as a style element and as application tokens) and how the can be improved, addressing T360077 and T305272. Note: these token display updates would potentially affect all token display tables on the Codex docs site.

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.

Explorations

The broad color palette expansion has been explored using generative tools with manual fine-tuning, aligning to the goals and considering the opportunities listed above. This expanded palette allows us to make general statement such as:

• The 700 value of every color (and 600 value of gray and taupe), which represent text and link colors in the Codex light mode and other potential themes, has at least 4.5:1 contrast ratio on all 50 values of all colors (and 100 value of gray and taupe). These same 700 values have a contrast ratio of at least 2.97:1 with the 900 value of gray and taupe, which would be the base text color in light mode or a potential sepia mode.
• The 400 value of every color (and 300 value of gray and taupe), which represent text and link colors in the Codex dark mode and other potential themes, has at least 4.5:1 contrast ratio on all 1000 values of all colors (and 800 value of gray and taupe).
• Other similar statements can be made for both light and dark modes for graphical elements and a 3:1 contrast ratio.

This expanded color exploration can be seen in the image below, and has also been tested in this Gerrit patch.

Disclaimer

Names of new colors, such as Lime, and exact color values may continue to change slightly but the goals listed above remain true.

Acceptance Criteria

• Realign values to one another across hues
• Fill in the gaps to expand color palette
• Add/adjust color option tokens
• Revise application and component tokens to match
• Revise docs to match new palette and tokens