Wikipedia:WikiProject Usability/Color
From Wikipedia, the free encyclopedia
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:
Color scheme from Commons:Help:Contents:
Other color schemes:
Wikipedia used this color scheme on its old main page:
[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:
[...]
[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.