diff --git a/visual-style_colors.html b/visual-style_colors.html index 70c3eb0..7fb96d8 100644 --- a/visual-style_colors.html +++ b/visual-style_colors.html @@ -1,376 +1,376 @@ Visual Style: Colors – Wikimedia Design Style Guide
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 #222 AAA RGB 34, 34, 34 HSB 0, 0%, 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 (Accent10) version of blue.

+

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. - Accent10 + Accent30 #2a4b8d AAA RGB 42, 75, 141 HSB 220, 70%, 55%

Utility colors

Utility colors are another type of accent color. Common meanings are associated with them.

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%

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

The color palette is also available as part of Resources – components overview or alternatively, SVG and PNG download as part of the 'resources' directory of this Design Style Guide repo.

References

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