##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**
{F55186430}
Figure 2 show the colors the colors which were defined in Codex only, which was a more limited palette.
**Figure 2**
{F55186586}
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**
{F55186720}
###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.
| maroon500 | 5.07:1
| red500 | 3.43:1
| yellow500 | 1.5:1
| green500 | 2.8:1
| blue500 | 3.74:1
| purple500 | 5.19:1
- The expanded color palette will allow for us to write more informed guidance for things like data visualization ([[ https://www.notion.so/wikimediadesign/Data-visualisation-guidelines-draft-b0c6246c28714bf384f3743e65d4b7b6?pvs=4 | 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 [[ https://doc.wikimedia.org/codex/latest/style-guide/colors.html#colors | colors as a style element ]] and [[ https://doc.wikimedia.org/codex/latest/design-tokens/color.html#color | 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 [[ https://gerrit.wikimedia.org/r/c/design/codex/+/1034572 | this Gerrit patch ]].
{F55189427}
####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