 | This help page is ahow-to guide. It explains concepts or processes used by the Wikipedia community. It is not one ofWikipedia's policies or guidelines, and may reflect varying levels ofconsensus. |
 | Links should be clearly recognizable as clickable to readers. Avoid usingcolored links as it may hinder the reader's ability to distinguish links from regular text, particularly coloring links solely for aesthetic purposes. See theManual of Style accessibility guideline sections onContrast andColor. |
To use a colour in atemplate ortable you can use thehex triplet (e.g.#CD7F32 is bronze) orHTML colour name (e.g. red).
Editors are encouraged to make use of tools, such asColor Brewer 2 to createBrewer palettes, listed atWikipedia:Manual of Style/Accessibility § Color forcolour scheme selection used in graphical charts, maps, tables, and webpages with accessibility in mind for colour-blind and visually impaired users.
For colour tables and a colour pallette, seeWikipedia:Manual of Style/Accessibility/Colors. For the WikiProject, seeWikipedia:WikiProject Color.
To apply colour to text, use:<span>text</span>
Note that you cannot use the Commonwealth spelling, "colour", in HTML tags used in wikitext.
Examples:
<spanbackground: #dadde3">red">red writing</span> shows asred writing<spanmw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1318107897">#0f0">green writing</span> shows asgreen writing<spanmw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1318107897">#0000FF">blue writing</span> shows asblue writing{{Font color}}, or its redirect{{Font colour}}, can also be used.
{{Font colour|fontcolour|backgroundcolour|Your text here}}
| Markup | Renders as |
|---|---|
{{font color|red|This text is different}} | This text is different |
{{font color|red|yellow|This text is different}} | This text is different |
{{font color||yellow|This text is different}} | This text is different |
The 3 colours are generated using theHSV colour space, then translated intoRGB. This method is used for selecting the colours used in various top-level pages, such as theMain Page,Village Pumps,Community Portal,Contents, andHelp:Contents.
| Hue | Saturation 4% Brightness 100% main background | Saturation 10% Brightness 100% 2nd header, accent colour | Saturation 15% Brightness 95% main border header background | Saturation 15% Brightness 75% header border only |
|---|---|---|---|---|
| Note: for layouts with no spacing between borders, use the darker border colour. | ||||
| 0° | #FFF5F5 | #FFE6E6 | #F2CECE | #BFA3A3 |
| 10° | #FFF7F5 | #FFEAE6 | #F2D4CE | #BFA7A3 |
| 20° | #FFF8F5 | #FFEEE6 | #F2DACE | #BFACA3 |
| 30° | #FFFAF5 | #FFF2E6 | #F2E0CE | #BFB1A3 |
| 40° | #FFFCF5 | #FFF7E6 | #F2E6CE | #BFB6A3 |
| 50° | #FFFDF5 | #FFFBE6 | #F2ECCE | #BFBAA3 |
| 60° | #FFFFF5 | #FFFFE6 | #F2F2CE | #BFBFA3 |
| 70° | #FDFFF5 | #FBFFE6 | #ECF2CE | #BABFA3 |
| 80° | #FCFFF5 | #F7FFE6 | #E6F2CE | #B6BFA3 |
| 90° | #FAFFF5 | #F2FFE6 | #E0F2CE | #B1BFA3 |
| 100° | #F8FFF5 | #EEFFE6 | #DAF2CE | #ACBFA3 |
| 110° | #F7FFF5 | #EAFFE6 | #D4F2CE | #A7BFA3 |
| 120° | #F5FFF5 | #E6FFE6 | #CEF2CE | #A3BFA3 |
| 130° | #F5FFF7 | #E6FFEA | #CEF2D4 | #A3BFA7 |
| 140° | #F5FFF8 | #E6FFEE | #CEF2DA | #A3BFAC |
| 150° | #F5FFFA | #E6FFF2 | #CEF2E0 | #A3BFB1 |
| 160° | #F5FFFC | #E6FFF7 | #CEF2E6 | #A3BFB6 |
| 170° | #F5FFFD | #E6FFFB | #CEF2EC | #A3BFBA |
| 180° | #F5FFFF | #E6FFFF | #CEF2F2 | #A3BFBF |
| 190° | #F5FDFF | #E6FBFF | #CEECF2 | #A3BABF |
| 200° | #F5FCFF | #E6F7FF | #CEE6F2 | #A3B6BF |
| 210° | #F5FAFF | #E6F2FF | #CEE0F2 | #A3B1BF |
| 220° | #F5F8FF | #E6EEFF | #CEDAF2 | #A3ACBF |
| 230° | #F5F7FF | #E6EAFF | #CED4F2 | #A3A7BF |
| 240° | #F5F5FF | #E6E6FF | #CECEF2 | #A3A3BF |
| 250° | #F7F5FF | #EAE6FF | #D4CEF2 | #A7A3BF |
| 260° | #F8F5FF | #EEE6FF | #DACEF2 | #ACA3BF |
| 270° | #FAF5FF | #F2E6FF | #E0CEF2 | #B1A3BF |
| 280° | #FCF5FF | #F7E6FF | #E6CEF2 | #B6A3BF |
| 290° | #FDF5FF | #FBE6FF | #ECCEF2 | #BAA3BF |
| 300° | #FFF5FF | #FFE6FF | #F2CEF2 | #BFA3BF |
| 310° | #FFF5FD | #FFE6FB | #F2CEEC | #BFA3BA |
| 320° | #FFF5FC | #FFE6F7 | #F2CEE6 | #BFA3B6 |
| 330° | #FFF5FA | #FFE6F2 | #F2CEE0 | #BFA3B1 |
| 340° | #FFF5F8 | #FFE6EE | #F2CEDA | #BFA3AC |
| 350° | #FFF5F7 | #FFE6EA | #F2CED4 | #BFA3A7 |
| S: 0% | #FFFFFF | #F9F9F9 | #F2F2F2 | #BFBFBF |
Wikipedia uses this colour scheme on itsMain Page and, for the final row, on theCommunity Portal.
| Hue | Light Box background / border | Title background / border | ||
|---|---|---|---|---|
| 150° | #F5FFFA /#CEF2E0 | #CEF2E0 /#A3BFB1 | ||
| 210° | #F5FAFF /#CEDFF2 | #CEDFF2 /#A3B0BF | ||
| 270° | #FAF5FF /#DDCEF2 | #DDCEF2 /#AFA3BF | ||
| 330° | #FFF5FA /#F2CEDD | #F2CEDD /#BFA3AF | ||
| 30° | #FFFAF5 /#F2E0CE | #F2E0CE /#BFB1A3 | ||
Additional 3-colour palettes using this same generation scheme are at the top of thetalk page. In theMonobook skin, the background colour of Wikipedia pages is#F8FCFF. In theVector 2022 skin, the background colour on all pages in light mode is#FFFFFF.
The Wikimedia Commons uses this colour scheme oncommons:Main Page andcommons:Help:Contents. Differing from the English Wikipedia, Commons does not use an extra, darker colour for bordering the header. Also, the colour sets are not derived from a hue the way the above table does.
| Light Box background / border | Title background / border | ||
|---|---|---|---|
| #F1F5FC /#ABD5F5 | #D0E5F5 /#ABD5F5 | ||
| #FAF6ED /#ABD5F5 | #FAECC8 /#FAD67D | ||
The Wikimedia Foundation Design team hasprovided a colour palette with colours being marked toward level AA conformance. It is used for all user-interface elements across products and in the main Wikimedia themes, desktop and mobile. However, it does not consider linked text.
It is best to choose background colours that offer sufficient contrast in relation to text andblue links, which is also the colour of references, both of which are very common in most articles. Use theWCAG link contrast checker to ensure that the chosen background colour offers the recommended WCAG AA level of contrast against normal text ( #202122) and blue links ( #3366CC for the defaultVector 2022 skin).[1]
| Base colour | Darkest backgrounds for dark text | Lightest background for white text | |||||
|---|---|---|---|---|---|---|---|
| Name | Hue | Hex | Colour | Text andlinks (WCAG AA) | Text only | Pure black text (not default) | |
| Red | 0° | #FF0000 | #FFE6E6 | #FF8888 | #FF6060 | #B60000 | |
| Orange | 30° | #FF8000 | #FFE8D0 | #FF8E1C | #E97500 | #8C4600 | |
| Yellow | 60° | #FFFF00 | #F3F300 | #B1B100 | #9B9B00 | #5C5C00 | |
| Chartreuse | 90° | #80FF00 | #B9FF72 | #61C100 | #54A900 | #326500 | |
| Green | 120° | #00FF00 | #ABFFAB | #00C700 | #00AE00 | #006800 | |
| Spring green | 150° | #00FF80 | #9DFFCE | #00C563 | #00AC56 | #006733 | |
| Cyan | 180° | #00FFFF | #7DFFFF | #00BFBF | #00A6A6 | #006363 | |
| Azure | 210° | #0080FF | #DCEEFF | #60B0FF | #3098FF | #0057AF | |
| Blue | 240° | #0000FF | #EAEAFF | #A2A2FF | #8888FF | #3030FF | |
| Violet | 270° | #8000FF | #F3E7FF | #C994FF | #B974FF | #7600EC | |
| Magenta | 300° | #FF00FF | #FFE3FF | #FF73FF | #FF29FF | #9F009F | |
| Rose | 330° | #FF0080 | #FFE4F1 | #FF81C0 | #FF52A8 | #B00058 | |
| Grey | — | 808080 | #EBEBEB | #ABABAB | #959595 | #595959 | |
Approximately 1 in 12 men and 1 in 200 women with Northern European ancestry havered-green colour blindness; this and other types affect people worldwide.[2] This table shows "safe" groups of colours which are distinguishable to most colour-blind people, although colour should never be used as the sole method to convey information.
See alsoCommons:Commons:Creating accessible illustrations for colour-blind friendly palettes.
| Colour 1 | Colour 2 | Colour 3 | Colour 4 | Colour 5 | Colour 6 |
|---|---|---|---|---|---|
| White | Yellow | Blue | Red | Black | Grey |
| Green | |||||
| Lime | Purple | Brown | Cyan | ||
| Orange | Pink |
The following utilities may be of use in determining whether a revised image is distinguishable to colour-blind users. Typically they take a web page or image file as an input, and render a colour-blind simulated image as output:
The standard rainbow should not be used to represent continuous data, because it creates artificial thresholds; humans do not see the spectrum as a smooth ramp. Greyscales, or a perceptually-even colour ramps, or a colour map chosen to deliberately highlight certain features, are preferable. Diverging colour ramps (two colour extremes around a white or black neutral value) tend to hide some high-frequency features.
Colours have cultural connotations; pick ones that match your data. That is, a diverging colour ramp with extremes "hot,cold" will be easier to understand than the reverse (hot,cold).
You can use an online tool or software to check the colour contrast ratio:
Before using a tool, check if it supportsWCAG 2.0, as older tools based on WCAG 1.0 are outdated.
The Wikimedia Foundation Design teamhas provided a color palette for AA-level contrast compliance. It is used for all user-interface elements across products and in the main Wikimedia themes, desktop and mobile. However, it does not consider linked text colour.
For AAA-compliant colour pairings for different text types (black text, white text, links, and visited links), refer to the table atWikipedia:Manual of Style/Accessibility/Colors. For named CSS-based text colours on a white background, refer toWikipedia:Manual of Style/Accessibility/CSS colors for recommended colours
