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).

Using colours in articles

See also: Category:Articles with images not understandable by color blind users

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.

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

Wikimedia colour schemes

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.

And additionally on the Community Portal and Wikisource Main Page:

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.

Commons

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

See also

• Color tool - list of online color tools
• List of colors
• Template:Fontcolor and template:Colorsample
• Web colors
• Wikipedia:Accessibility
• Wikipedia:How to reduce colors for saving a JPEG as PNG
• Wikipedia:Infobox colours - inactive
• Wikipedia:Template standardisation
• Wikipedia:WikiProject Color
• Wikipedia:WikiProject Usability/Color - inactive