Wikimedia Foundation Design/Color usage

From MediaWiki.org
Jump to: navigation, search

This is a work in progress

The relationship between this and Style guide/Color selection and accessibility is unclear.

This page describes guidelines for the use of color within projects run by the Wikimedia Foundation.

Current Color Palette:

Working Color Palette 2nd Nov 2012

Philosophy[edit | edit source]

It should be noted that while Wikipedia (and her sister sites) are ostensibly tools for information retrieval, they should not be designed as such. Social software patterns are to be used to direct the user's attention and workflow where required.

In Wikimedia Foundation applications, the overal color palette shall generally be monochromatic greyscale for all "chrome" elements. Chrome elements are designed to float to the background of the user's consciousness and require little thought or attention.

Within interfaces, color should be used primarily for two things:

  • Attract attention to specific elements, generally affordances, and
  • Convey information to the user

Accordingly,

  • Attraction colors shall be vibrant and intense;
  • Information colors shall be weighted according to their function (e.g., a warning may be intense, while showing an 'okay' status may not be).

Note that color alone should rarely be the only indicator of a state (owing to various accessibility concerns). Texturized and pattern color is acceptable, but should be used sparingly.

Decision Rationales[edit | edit source]

Two colors are not included in the palette: yellow and purple.

Lack of Yellow[edit | edit source]

The color yellow is a very difficult color to work with.

  • Computer screens do not have yellow pixels. All "yellows" shown on a computer are actually browns with a great deal of white thrown in for good measure (typically done by firing red and green pixels in tandem).
  • Yellow is generally a "weak" color when used sparingly. For best effect it requires large fields, which is great if the design is primarily yellow-based.
  • Yellow is a generally "inflexible" color. It is difficult to create several shades (as are required in a palette) because adding too much white to the color will pale to the point of uselessness and adding too much black to it will cause it to appear dingy and unappealing.
  • Physiologically, yellow is the most stressful color on human eyes because of the amount of light it reflects. This means it generally has to be offset with similarly strong colors.
  • Psychologically, yellow is normally used to express newness (good) but also is associated with cowardice in some cultures.

While adding a yellow (for spot usage) could be desirable, it was decided that we should not include it because we would rather not arm people with a color that is difficult to use well. If no yellow shades exist in the palette, then there will be fewer chances to use it incorrectly.

Lack of Purple[edit | edit source]

Purple was not included in the primary palette because there are few color semantics that utilize it and there was a desire to keep the palette smaller rather than broader. Since the primary accent for purple is yellow, and yellow is not included, working with purple then becomes more difficult. When used with high saturation, purple is beautiful, but its value can easily be replaced with blue tones.

Purple does show up within the school of various link colors. In this case it is appropriate.

General Palette[edit | edit source]

Agora Color Palette

For discussion:

  • Red #CC0000
  • Dark Blue #3366bb
  • Green #27AA65

Functional Colors[edit | edit source]

Color Coding/ What Colors Represent[edit | edit source]

Red is used to call attention when there are problems or something needs your attention. It should be used sparingly to retain effect:

  • Errors/Warnings
  • Notifications
  • Missing Information
  • Destructive actions.
Sample Usage of the color Red in UI Elements

Blue is used for information Design. It represents actionability & continuity/ keep going.

  • Actionable items such as links
  • Buttons: Emphasized Actions
  • Buttons: Actions associated with 'Continue'
  • Selected State Background Fill
  • Information Design (Bolding, calling attention to important but not critical state elements)
  • Information icons
Sample Usage of the color Blue in UI Elements

Green is used for:

  • Positive Action
  • Positive Emotion
  • Confirmation
Sample Usage of the color Green in UI Elements
Sample Usage of the color Grey in UI Elements

Parking Lot (Undetermined)

  • Vitality/ Star Ratings
  • Watch this article
  • Section Headers (Currently carrying Blue Fills)
  • Added Removed Bits

Link Colors[edit | edit source]

  • Active link
  • Local link
  • External link
  • Red link (missing/wanted page)
  • Visited Local link
  • Visited External link
  • Visited Red link
  • Review Button[clarify]

Panel Color[edit | edit source]

  • Content Panel
  • Control Panel
  • Modal Overlays

Alert Colors[edit | edit source]

  • Notice
  • Warning
  • Error

Calls-to-Action[edit | edit source]

  • Primary action
  • Secondary action
  • Side-effect/Danger action - Non-recoverable activity
  • Disabled/Inactive action

Skin/Chrome[edit | edit source]

Audit[edit | edit source]

  • Existing usage/coding of colors in the system

See also[edit | edit source]

External links[edit | edit source]