Skip to content

Latest commit

 

History

History
336 lines (296 loc) · 14.9 KB

colors.md

File metadata and controls

336 lines (296 loc) · 14.9 KB
Raw

Colors

<style> /* stylelint-disable scale-unlimited/declaration-strict-value */ </style>

The color palette represents our character and brings a hint of freshness to our products.

Because content readability for everyone is our main goal, we have made accessibility considerations a top priority. Each color detailed below indicates its WCAG conformance level (“AA” or “AAA”). This level is based on a color's contrast against white or black.

Gray scale

Base colors define the content surface and the main color for content. Different shades of paper and ink are useful to emphasize or de-emphasize different content areas.

Base colors range from pure white to true black . Intermediate shades of gray include a tint of blue for greater harmony with our accent colors.

When applying text on a surface, check the color contrast between the text and the background. Colors from White to Gray400 are safe text colors for a black surface. Colors from Gray500 to Black are safe colors for a white surface.

  1. White #fff AAA HSB 0, 0%, 100%
  2. Gray100 #f8f9fa AAA HSB 210, 1%, 98%
  3. Gray200 #eaecf0 AAA HSB 220, 3%, 94%
  4. Gray300 #c8ccd1 AAA HSB 213, 4%, 82%
  5. Gray400 #a2a9b1 AAA HSB 212, 8%, 69%
  6. Gray500 #72777d AA / AA HSB 210, 9%, 49%
  7. Gray600 #54595d AAA HSB 207, 10%, 36%
  8. Gray650 #404244 AAA HSB 210, 6%, 27%
  9. Gray700 #202122 AAA HSB 210, 6%, 13%
  10. Black #000 AAA HSB 0, 0%, 0%

Accent colors

Accent colors are used to emphasize actions and to highlight key information. Blue is a natural choice in our context, where it has been the default color used for links and conveys the idea of action.

There are three shades provided for when a lighter (Blue100), regular (Blue600) or a darker (Blue700) version of blue is needed.

Blue600 is suitable to use for text and as background. When used for link text, this color provides sufficient contrast with black text. When used as a background, it provides sufficient contrast with white text.

  1. Blue100 #eaf3ff AAA HSB 214, 8%, 100%
  2. Blue500 #447ff5 AA HSB 220, 72%, 96%
  3. Blue600 #36c AA HSB 220, 75%, 80%
  4. Blue700 #2a4b8d AAA HSB 220, 70%, 55%

Utility colors

Utility colors are another type of accent color.

Shades of red, green, and yellow are used as utility colors.

  1. Red100 #fee7e6 AAA HSB 2, 10%, 100%
  2. Red500 #ff4242 AA HSB 0, 74%, 100%
  3. Red600 #d73333 AA HSB 360, 76%, 84%
  4. Red700 #b32424 AAA HSB 360, 60%, 53%
  1. Green100 #d5fdf4 AAA HSB 167, 16%, 99%
  2. Green500 #00af89 AA HSB 167, 100%, 69%
  3. Green600 #14866d AA HSB 167, 85%, 53%
  4. Green700 #096450 AAA HSB 167, 85%, 53%
  1. Yellow100 #fef6e7 AAA HSB 39, 9%, 100%
  2. Yellow500 #fc3 AA HSB 45, 80%, 100%
  3. Yellow600 #edab00 AA HSB 43, 100%, 93%
  4. Yellow700 #ac6600 AAA HSB 36, 100%, 67%

Common meanings are associated with them:

  • Variants of red indicate errors in components, such as invalid text in a text field. They also represent destructive actions, such as delete or cancel.
  • Variants of green indicate success in components.
  • Variants of yellow indicate a non-disruptive warning or an alert.

When indicating meaning to visually impaired users, do not only rely on a color, but use additionally clear wording and icons.

Additional colors

Some use cases, such as charts and data visualization, may need a broader color palette. Aim for level AA contrast (4.5:1) when extending the default palette. Make sure to test how these colors are perceived at different color vision deficiency conditions.[1]

Resources

Find the color palette in the Design tokens Figma library.

References

  1. See also English Wikipedia on accessible color usage as part of its Manual of Style.
<style lang="less"> @import ( reference ) '@wikimedia/codex-design-tokens/theme-wikimedia-ui.less'; .cdx-docs-colors { // Override VitePress list styles. ol& { margin: 0; padding: 0; &:first-child { margin-top: @spacing-200; } li + li { margin-top: 0; } } &__group { display: flex; flex-wrap: wrap; justify-content: space-between; gap: @spacing-100; } &__color { list-style: none none; display: flex; flex-direction: column; position: relative; // On smaller screens, squares are 50% width. // Subtract 1/2 of the total gap width from the width of each color. width: calc( 50% - @spacing-50 ); // Make the div square via 0 height and padding-bottom equal to the width. height: 0; margin-bottom: @spacing-100; border: @border-width-base @border-style-base @border-color-inverted; padding: 0 @spacing-75 calc( 50% - @spacing-50 ); @media screen and ( min-width: @min-width-breakpoint-tablet ) { // On larger screens, make the squares 25% width. // Subtract 1/4 of the total gap width from the width of each color. width: calc( 25% - @spacing-75 ); padding-bottom: calc( 25% - @spacing-75 ); font-size: @font-size-small; } &__name { position: absolute; // This makes the card look like it has 12px of padding-bottom. bottom: @spacing-75; font-size: @font-size-xxx-large; } &__hex { // This makes the card look like it has 12px of padding-top. padding-top: @spacing-75; } &__wcag-level { span { color: @color-inverted; } } &__hsb { opacity: @opacity-transparent; font-size: @font-size-small; transition-property: @transition-property-fade; transition-duration: @transition-duration-medium; @media screen and ( min-width: @min-width-breakpoint-tablet ) { font-size: @font-size-x-small; } } &:hover { .cdx-docs-colors__color__hsb { opacity: @opacity-base; } } &--dark { color: @color-inverted; } } } /* stylelint-enable scale-unlimited/declaration-strict-value */ </style>