Color palette accessibility updates
Proposal
Update the existing UI and theme color palettes with accessibility considerations.
Purpose
Our current color palettes (and use) only meets a 3:1 contrast ratio for typical use, however 4.5:1 should be our standard since it’s the WCAG 2.1 AA standard for text.
Solution
I adjusted each hue so that the 500 value meets or exceeds a 4.5:1 contrast ratio on #fafafa
. Why? Because we use this color for the sidebar background, and if a color passes here, it will pass on white. Conversely, each 400 value meets or exceeds a 4.5:1 contrast ratio on #1f1f1f
. By not using white and black as the surface colors, we make our palette more robust, and guarantee even better contrast on those colors.
This means:
- You could reference a value ≥500 and know, without looking at it, that is passes on
#fafafa
- You could reference a value ≤400 and know, without looking at it, that it passes on
#1f1f1f
- Across the board we could use values more consistently (think uniform values for hover states, etc.)
- We’re going to be better prepared for a dark UI theme with a palette that supports it. A caveat here is that with 11 values, there’s an uneven split. If we determine in the future that 5 is not enough for a dark UI, we could add a step between existing values.
I also used more linear steps between each value. Currently, the values are very bright at one end, and very dark at the other, leaving less saturation to distinguish those colors. With the new linear steps the colors are more vibrant at each end, and the steps between each feel more consistent.
Ah, purple. Yep, that’s new too, and has been covered in gitlab-org/gitlab-services/design.gitlab.com#361 (closed). @andyvolpe has been doing some exploration in which this would help. We would look to associate meaning to purple, similar to how the other UI hues are allocated.
The most noticeable change is orange. Orange hues simply can’t be bright enough while meeting minimum contrast. This does push it closer to the UI red, but given that we shouldn’t be using color alone to indicate status, context will confirm the difference.
No color variables were harmed in this exploration. In fact, we could test this easily by simply updating variable settings.
Palette updates | Palette updates with background surfaces |
---|---|
Normalized contrast ratios |
---|
D = #1f1f1f , L = #fafafa
|