Wikimedia Design Style Guide will be archived soon. Visit its improved and enhanced successor:
Codex, Design System for Wikimedia.
Visual Style

Colors

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

  1. Accent90 #eaf3ff
  2. Accent50 #36c
  3. Accent10 #2a4b8d
  1. Base100
  2. Base90
  3. Base80
  4. Base70
  5. Base50
  6. Base30
  7. Base20
  8. Base10
  9. Base0
  1. Red90 #fee7e6
  2. Red50 #d33
  3. Red30 #b32424
  1. Green90 #d5fdf4
  2. Green50 #00af89
  3. Green30 #14866d
  1. Yellow90 #fef6e7
  2. Yellow50 #fc3
  3. Yellow30 #ac6600

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.

Base colors

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 (Base100) to true black (Base0). Intermediate shades of gray include a tint of blue for greater harmony with our accent colors.

When applying text on a surface, you need to check the color contrast between the text and the background:

  • Base100…50 are safe text colors for a black surface.
  • Base30…0 are safe text colors for a white surface.
  1. Base100 #fff AAA RGB 255, 255, 255 HSB 0, 0%, 100%
  2. Base90 #f8f9fa AAA RGB 248, 249, 250 HSB 210, 1%, 98%
  3. Base80 #eaecf0 AAA RGB 234, 236, 240 HSB 220, 3%, 94%
  4. Base70 #c8ccd1 AAA RGB 200, 204, 209 HSB 213, 4%, 82%
  5. Base50 #a2a9b1 AAA RGB 162, 169, 177 HSB 212, 8%, 69%
  6. Base30 #72777d AA / AA RGB 114, 119, 125 HSB 210, 9%, 49%
  7. Base20 #54595d AAA RGB 84, 89, 93 HSB 207, 10%, 36%
  8. Base10 #202122 AAA RGB 32, 33, 34 HSB 210, 6%, 13%
  9. Base0 #000 AAA RGB 0, 0, 0 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 you need a lighter (Accent90), regular (Accent50) or a darker (Accent30) version of blue.

Accent50 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 background, it provides sufficient contrast with white text.

  1. Accent90 #eaf3ff AAA RGB 234, 243, 255 HSB 214, 8%, 100%
  2. Accent50 #36c AA Progressive RGB 51, 102, 204 HSB 220, 75%, 80%
  3. Accent30 #2a4b8d AAA RGB 42, 75, 141 HSB 220, 70%, 55%

Utility colors

Utility colors are another type of accent color.

We use shades of red, green, and yellow as utility colors.

  1. Red90 #fee7e6 AAA RGB 255, 231, 230 HSB 2, 10%, 100%
  2. Red50 #d33 AA / AA Destructive RGB 221, 51, 51 HSB 360, 77%, 87%
  3. Red30 #b32424 AAA RGB 135, 54, 54 HSB 360, 60%, 53%
  1. Green90 #d5fdf4 AAA RGB 213, 253, 244 HSB 167, 16%, 99%
  2. Green50 #00af89 AA RGB 0, 175, 137 HSB 167, 100%, 69%
  3. Green30 #14866d AA RGB 20, 134, 109 HSB 167, 85%, 53%
  1. Yellow90 #fef6e7 AAA RGB 254, 246, 231 HSB 39, 9%, 100%
  2. Yellow50 #fc3 AAA RGB 255, 204, 51 HSB 45, 80%, 100%
  3. Yellow30 #ac6600 AA RGB 172, 102, 0 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, 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 WikimediaUI Icons and Colors Figma file.

Alternatively, the color palette is available as SVG and PNG download from 'resources' directory of this Design Style Guide repository.

References

  1. See also English Wikipedia on accessible color usage as part of its Manual of Style.