Style guide/Color selection and accessibility

This document is a work in progress.

This document is part of the MediaWiki style guide. This section concerns itself with color choices and elements of user accessibility that should be taken into account when designing systems.

Color Selection

Color selection within user-interfaces can be tricky. It is helpful to understand how human beings react to various colors and the psychological reasons behind these reactions.

Color can be divided into two broad categories: "warm" and "cool". As a rule of thumb, warm colors are those with lots of red and yellow in their makeup; cool colors are those with any blue. Browns are warm; greys and blacks are perceived as "cool".

Warm:	Red		Orange		Yellow		Brown
Cool:	Blue		Green		Purple		Grey

The color red requires special consideration. No other color demands attention as much as red because human beings are biologically wired to respond to the color red as a stressor. There are measurable, biological effects to its presence (such as increased heart rate). Quite simply, this is because of the color of human blood. We know, innately, that "red" equals "bad" and demands immediate attention.

Likewise, Green is perceived as being positive. Green is the color of life (trees, grass, etc.). Human culture has elevated the color green to one meaning "forwardness" and "safety."

Yellow is a difficult color to work with in computers. Computer monitors (and television sets) do not generate the color yellow because pixels are comprised of only three colors: red, green, and blue. Any yellow color is technically generated as a low-intensity brown (with green, red, and white pixels firing in a moire pattern).

Research References

• Color Psychology in Web Design - Big Websites Case Study
• Empathizing Color Psychology in Web Design
• Color Psychology and Marketing
• Psychology of Colors: Web Design Colors
• Color Psychology for Webpages

Note: much of the color research found is duplicative; this is because color research is a known, well-explored area of study.

Alert Color versus Chrome Color

Since different sites have different color schemes, colors that attract attention can be different. Accordingly, we will refer to color types in the following manner:

• Chrome color is color that falls to the background of the user's perception. Chrome color is seen and understood to be part of the site's "operating system" and does not attract attention.
• Alert color is color that rises to the front of the user's perception. Alert color invites attention and exploration.

Most MediaWiki installs that use the Monobook or Vector skins will have a primary "chrome" color scheme of greys and blues. In this case, "alert" colors will have to be warm. In contrast, skins that are warmer in nature will use cooler colors for alerts.

Accessibility for Visually Impaired Users

There are many things to think about when designing forms that can be used effectively by users with various types of visual impairment.

Color blindness

There are several forms of color-blindness and they have subtle differences. This can be difficult to design for.

In general, avoiding the use of color as the only indicator of something in a form is best practice. Varying color intensity and lightness is key when designing indicators.

Poor eyesight

Subtle visual elements are often lost on users with poor eyesight. If something is important, it should be visually elevated. Elements of 5 pixels in size are usually too small to be easily distinguished; use 16 or more pixels in such cases.

Color intensity contrast is important in this regard. Two opposite colors can appear the same if they have the same intensity (amount of white).

Dyslexia

While not technically a vision impairment, certain design choices can wreck havoc to individuals with dyslexia.

Dyslexic individuals can have difficulty reading text on colored backgrounds when the intensity of the text color approaches that of the background.

Blocks of text should never be centered or justified. This creates a "gutter" effect which can appear as a moire pattern. Always use aligned text (left for left-to-right languages; right-aligned for right-to-left languages).

Other things to avoid include the use of capitals for emphasis, italics, and serif fonts.

Research References

• Lighthouse International: Effective Color Contrast
• Lighthouse International: Making Text Legible
• Web Design for Dyslexic Users
• Web Designing for Dyslexia
• American Foundation for the Blind: Web Accessibility