Wikipedia:Colours

From Wikipedia, the free encyclopedia

✔ This guideline is a part of the English Wikipedia's Manual of Style. Editors should follow it, except where common sense and the occasional exception will improve an article. Before editing this page, please make sure that your revision reflects consensus.
Shortcuts:
WP:COLOR
WP:COLOUR
This page in a nutshell: Be careful when adding colours to articles.

Colours are most commonly found in Wikipedia articles within templates and tables.

To use a colour in a template or table you can use the hex triplet (e.g. bronze is #CD7F32) or HTML colour names (e.g. red).

Contents

[edit] Using colours in articles

A pair of screenshots showing the effects of red/green colorblindness on legibility
A pair of screenshots showing the effects of red/green colorblindness on legibility

The following guidance aims to improve accessibility in articles (see Wikipedia:Accessibility) as well as ensure that articles look as good as possible:

  • Ensure that colour is not the only way used to convey important information. Especially, do not use coloured text unless its status is also indicated using another method such as italic emphasis or footnote labels. Otherwise blind users or readers accessing Wikipedia through a printout or device without a colour screen will not receive that information.
  • Many readers of Wikipedia may be partially or fully colour blind. Ensure that the colour combinations used in Wikipedia (infoboxes, navigational boxes, graphs, etc.) have an adequate contrast. Use a colour scheme generator to select the colours, and tools for simulating colour blind vision (colorfilter.wickline.org or vischeck.com) to check the result.
  • Overriding a link colour, especially to red, is confusing and should be avoided.
  • Be aware of the contrast of both plain text and the blue link text with the background colour and avoid clashes where possible (such as blue writing on a red background).
  • Web pages can be checked on-line by the developers with AccessColor, which analyses the HTML source for a web page and the Cascading Style Sheets associated, and then calculates the colour contrast and colour brightness between the text and background colours to check that they conform with WCAG 1.0.
  • Suitable colour contrast for people with vision impairments, including colour blindness, can be tested with the Colour Contrast Analyser or a specific Firefox extension that use the draft algorithms from the W3C.

[edit] Overriding font colour

To make a word have colour, use: <span style="color:hex triplet or colour name">text</span>

Examples:

  • <span style="color:red">red writing</span> shows as red writing
  • <span style="color:#0f0">green writing</span> shows as green writing
  • <span style="color:#0000f1">blue writing</span> shows as blue writing

[edit] Wikimedia colour schemes

[edit] Wikipedia

Wikipedia uses this colour scheme on its Main Page.

Please note that the colour for the border on the lighter boxes is also the colour of the backgrounds of the darker (title) boxes.
background:#f5fffa border:#cef2e0   background:#cef2e0 border:#a3bfb1  
background:#f5faff border:#cedff2   background:#cedff2 border:#a3b0bf  
background:#faf5ff border:#ddcef2   background:#ddcef2 border:#afa3bf  
background:#fcfcfc border:#cccccc  

And additionally on the Community Portal and Wikisource Main Page:

background:#fffaf5 border:#f2e0ce   background:#f2e0ce border:#bfb1a3  

Additional 3-colour palettes using this same generation scheme are at the top of the talk page. The background colour of Wikipedia pages is #F8FCFF.

[edit] Commons

The Wikimedia Commons uses this colour scheme on commons:Main Page and commons:Help:Contents.

background colour: #d0e5f5

background colour: #f1f5fc

border colour: #abd5f5
background colour: #faecc8

background colour: #faf6ed

border colour: #fad67d

[edit] See also