Update color palette based on accessibility work
In gitlab-design#720 (comment 276140461) it was proposed to update the color palette to address many color issues related to accessibility. Additionally, this has benefits for designers and developers by normalizing the palette across hues (essentially equalizing contrast values of a given variable, like $[hue]-500
), so that we can better systematize states and prepare for a dark theme.
View the proposed palette in Figma →
Palette with contrast ratios | Palette only |
---|---|
![]() |
![]() |
Grayscale example to show normalized values | Before/After comparison |
---|---|
![]() |
![]() |
Scope
- All “UI” hues
- All “theme” hues
- Neutrals
Considerations
- The
$purple-
family is yet to be documented in Pajamas Foundations > Color - Pajamas Foundations > Color will have to be updated with new hex values, since it’s currently hardcoded
- Neutrals have a new,
$gray-0
value - Existing neutrals will have to be mapped to the new variables based on proximity to the nearest match
- New concept of “surfaces,” which are the background colors we set as limits and weigh contrast ratios against
-
$gray-0
#fafafa
is what we calculate contrast ratios against for a light UI. This means that hues will have increased contrast on white -
$gray-950
#1f1f1f
is what we calculate contrast ratios against for a dark UI. This means that hues will have increased contrast on black, although we suggest that this is the darkest surface we use, instead of pure black.
-
Edited by Jeremy Elder