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
Colors__beta_ Colors__beta_2
Grayscale example to show normalized values Before/After comparison
normalized comparrison

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.

Neutral_palette_mapping

/cc @tauriedavis @pedroms @ealcantara

Edited by Jeremy Elder