Wikipedia:WikiProject Usability/Color

From Wikipedia, the free encyclopedia

This Wikipedia page is currently inactive and is kept primarily for historical interest. If you want to revive discussion regarding the subject, you should ask for broader input, for instance at the village pump.

Color may be used to convey information, to make things stand out, or to make things aesthetically pleasing. Wikipedia allows the use of color through HTML and CSS (See our standards regarding HTML).

We believe that:

  • Colors must be used carefully
  • Things conveyed with colors must also be conveyed by other means

[edit] Aesthetic ideas

(A list of aesthetic implementations or concepts.)

  • Simplicity - some users advocate the abolition of color altogether. We disagree with this, but we do acknowledge their point: do not employ anything that does not serve a purpose. (There is, however, a clear need for color: the main page uses it to allow the user to focus onto one aspect of a relatively "busy" space, and notices use it to bring attention to themselves.)

With regard to notices, tables, and similar elements:

  • A very light background - many of the most popular websites on the internet use this, and with good reason. Dark backgrounds look inactive ("dead"), brightly-colored backgrounds cause eye-strain, and both are generally unpleasant.
  • A thin and slightly darker border - One very good looking use of colors is a light colored background, with a 1px border that is a darker version of that same color.

Wikipedia uses the following color scheme on its new main page:

Title
this is an example of black text with color applied to its background and border
Title
this is an example of black text with color applied to its background and border


Title
this is an example of black text with color applied to its background and border
Title
this is an example of black text with color applied to its background and border



Color scheme from Commons:Help:Contents:

Title
this is an example of black text with color applied to its background and border
Title
this is an example of black text with color applied to its background and border



Other color schemes:

this is an example of text with color applied to its background and border
this is an example of text with color applied to its background and border


Wikipedia used this color scheme on its old main page:

this is an example of text with color applied to its background and border
this is an example of text with color applied to its background and border


[edit] Colors to convey intent

Colors are associated with various concepts.

  • Red - hostility, disagreement, "stop!", "attention!"
  • Green - "go ahead", openness
  • Blue - order, calm, neutrality
  • Purple - (varies greatly due to region)
  • Orange/Yellow - cheerfullness, surprise
  • Gray - passiveness

When using color in a template that may appear critical of some work that a user has done, such as the npov or merge templates, it is best to use a neutral color - definitely not red. The following exaggerated message is clearly not productive:

There is a dispute as to the factual accuracy of this article, please[...]

[...]

[edit] Improper use of color

Have a look at the following examples:

  • this is an example of text with color applied to its background and foreground
  • this is an example of text with color applied to its background and foreground
  • this is an example of text with color applied to its background and foreground

Now, it's possible to read some of the above (if your eyes are in perfect working order) - but do you want to? Most bleed into their backgrounds, or cause quite a bit of strain on the eyes. Not all are suitable for use in Wikipedia. Please avoid using colors in the manner depicted above on Wikipedia articles. When using any change to the background color, the text color should also be set to black if no other color is intended, since some users may have their default color scheme set to white on a dark color.

In other languages