Design/Archive/Wikimedia Foundation Design/Color usage

This is a work in progress

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

Philosophy
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
Two colors are not included in the palette: yellow and purple.

Lack of Yellow
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
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


For discussion:
 * Red #CC0000
 * Dark Blue #0b41b4
 * Green #008740

Color Coding/ What Colors Represent
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.

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

Green
 * Positive Action
 * Positive Emotion

Parking Lot (Undetermined)
 * Vitality/ Star Ratings
 * Watch this article
 * Section Headers (Currently carrying Blue Fills)
 * Added Removed Bits

Link Colors

 * Active link
 * Local link
 * External link
 * Visited Local link
 * Visited External link
 * Redlink (missing/wanted page)
 * Review Button

Panel Color

 * Content Panel
 * Control Panel
 * Modal Overlays

Alert Colors

 * Notice
 * Warning
 * Error

Calls-to-Action

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

Audit

 * Existing usage/coding of colors in the system