Define a pure gray color scale
Description
https://gitlab.com/gitlab-org/gitlab-ce/issues/31351 was created to ditch our current pure grays and implement a scale of tinted grays (pure grays overlayed with a shade of color). But because we're adding an option to change the navigation color palette, the colors proposed on that first issue will have to be revisited.
In the meantime, we can lay the groundwork by defining a proper scale of pure grays. Currently, we have too many gray values in the UI (82 to be exact!), which are too similar and are not associated with a scale.
Implement a scale of pure grays:
- That provides some visible contrast between each step
- Where the colors used for type pass the WCAG guidelines, even when text is over a light gray background (
#F2F2F2
)
Proposal
Applying these colors to type (the following WCAG scores are over a light gray background #F2F2F2
):
-
$gray-900
(#2E2E2E
) for titles, primary text, and icons (WCAG AAA) — Value already defined for$gl-text-color
-
$gray-700
(#707070
) for secondary text and icons, or icons accompanying primary text (WCAG AA) — Value already defined for$gl-text-color-secondary
-
$gray-600
(#949494
) for placeholders and tertiary text (WCAG AA for large text) - Value already defined for$gl-text-color-tertiary
Links / references
- Standardize text colors #25701
- https://www.viget.com/articles/shades-of-gray-yes-really
- https://www.viget.com/articles/equating-color-and-transparency
Feature checklist
-
Documentation