Editing Help:Color

This Help Topic is on the use of colors in articles (though the advice on contrast ratios, schemes, and colour-blindness is applicable more generally)
== Color ==
'''Colors''' are most commonly found in Wikipedia articles within templates and tables. 
{{Shortcut|H:Color}}
Articles (and other pages) that use color should keep accessibility in mind, as follows:

* Ensure that color is not the only method used to communicate important information. Especially, do not use colored text or background unless its status is also indicated using another method, such as an accessible symbol matched to a legend, or labels.
* Links should clearly be identifiable as a link to our readers.
* Some readers of BTW are partially or fully [[w:Color blindness|color-blind]] or visually impaired. Ensure the contrast of the text with its background reaches at least [[w:Web Content Accessibility Guidelines|Web Content Accessibility Guidelines]] (WCAG) 2.0's AA level, and AAA level when feasible (see WCAG's [https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html "Understanding SC 1.4.3: Contrast (Minimum)"]). For other usage, here is a selection of tools that can be used to check that the contrast is correct:
** You can use a few online tools to check color contrasts, including: the WebAIM online [https://webaim.org/resources/contrastchecker/ contrast checker], or the [https://whocanuse.com/ WhoCanUse] site, or [https://snook.ca/technical/colour_contrast/colour.html Snook's Colour Contrast Check].
** Several other tools exist on the web, but check if they are up-to-date before using them. Several tools are based on WCAG 1.0's algorithm, while the reference is now WCAG 2.0's algorithm. If the tool doesn't specifically mention that it is based on WCAG 2.0, assume that it is outdated.
** The Wikimedia Foundation Design team [https://design.wikimedia.org/style-guide/visual-style_colors.html has provided a color palette] with colors being marked towards 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.
** Google Chrome has a [https://a11ywins.tumblr.com/post/167324368213/google-chromes-color-contrast-debugger color contrast debugger] with visual guide and color-picker.
** The downloadable software [https://www.tpgi.com/color-contrast-checker/ Color Contrast Analyser] enables you to pick colors on the page, and review their contrast thoroughly. However, be sure to only use the up-to-date "luminosity" algorithm, and not the "color brightness/difference", which is outdated.
* Additional tools can be used to help produce graphical charts and color schemes for maps and the like. These tools are not accurate means to review contrast accessibility, but they can be helpful for specific tasks.
** [https://paletton.com/ Paletton] (previously Color Scheme Designer) helps to choose a good set of colors for a graphical chart.
** [https://colorbrewer2.org/ Color Brewer 2.0] provides safe color schemes for maps and detailed explanations.
** [https://personal.sron.nl/~pault/#fig:scheme_light Light qualitative color scheme] provides a set of nine colors that work for color-blind users and with black text labels (among other palettes).
** There are some tools for simulating color-blind vision: [https://www.toptal.com/designers/colorfilter Toptal ColorFilter] (webpage analysis) and [https://www.color-blindness.com/coblis-color-blindness-simulator/ Coblis Color-blindness Simulator] (local file analysis). There are also browser extensions for webpage analysis: [https://addons.mozilla.org/en-US/firefox/addon/nocoffee/ NoCoffee] (Firefox)
** A very simple open-source tool that can be helpful for choosing contrasting colors is [https://colororacle.org/ Color Oracle], a "free color blindness simulator for Windows, Mac and Linux". It lets you view whatever is on your screen as it would be seen by someone with one of three types of color-blindness or in greyscale. 
* If an article overuses colors, and you don't know how to fix it yourself, you can ask for help from other editors. Place {{tl|Overcolored}} or {{tl|Overcoloured}} at the top of the article.

== Using Colors==
{{Shortcut|H:Usingcolor}}
* Links should clearly be identifiable as links to readers. 
* Refrain from implementing coloured links that may impede user ability to distinguish links from regular text, or colour links for purely aesthetic reasons.
* To use a colour in a template or table you can use the [[w:hex triplet|hex triplet]] (''e.g.'' bronze is #CD7F32) or [[w:HTML colour names|HTML colour names]] (''e.g.'' red).

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

Examples:
*<code><nowiki><span style="color:red">red writing</span></nowiki></code> shows as <span style="color:red">red writing</span>
*<code><nowiki><span style="color:#0f0">green writing</span></nowiki></code> shows as <span style="color:#0f0">green writing</span>
*<code><nowiki><span style="color:#0000FF">blue writing</span></nowiki></code> shows as <span style="color:#0000FF">blue writing</span>

===Template font colour===
[[Template:Font color]], or its redirect [[Template:Font colour]], can also be used.
  
<code><nowiki>{{Font colour|fontcolour|backgroundcolour|Your text here}}</nowiki></code>

{| class="wikitable" style="width:100%; text-align:left;"
! style="width: 450px" | Example
! Result
|- style="background-color: #fff; height: 80px;"
|&nbsp;&nbsp;<code><nowiki>{{font color|red|This text is different}}</nowiki></code>
|{{font color|red|This text is different}}<br />to change text-color only (Note: do not style text as a link)
|-style="background-color: #fff; height: 80px; padding-left: 6px;"
|&nbsp;&nbsp;<code><nowiki>{{font color|red|yellow|This text is different}}</nowiki></code>
|{{font color|red|yellow|This text is different}}<br /> to change text and background color
|-style="background-color: #fff; height: 80px; padding-left: 6px;"
|&nbsp;&nbsp;<code><nowiki>{{font color||yellow|This text is different}}</nowiki></code>
|{{font color||yellow|This text is different}}<br />to change background color only<br />'''note''' the two pipe-characters <code>&#124;&#124;</code>
|}

===Color generation guide===
{| border="0" cellspacing="4" cellpadding="8" style="border:black solid 1px;"
|+ 
|-
! width="60px" | Hue !! Saturation 4%<br />Brightness 100%<br /><br /><small>main background</small> !! Saturation 10%<br />Brightness 100%<br /><br /><small>2nd header, accent colour</small> !! Saturation 15%<br />Brightness 95%<br /><small>main border<br />header background</small> !! Saturation 15%<br />Brightness 75%<br /><br /><small>header border only</small>
|-
! &nbsp; !! &nbsp; !! colspan="3" style="text-align:right" | <small>Note: for layouts with no spacing between borders, use the darker border colour.</small>
|-
| style="background:#FF0000; color:white; text-align:center;" | Hue: 0 || style="background:#FFF5F5; color:black; text-align:center;" | #FFF5F5 || style="background:#FFE6E6; color:black; text-align:center;" | #FFE6E6 || style="background:#F2CECE; color:black; text-align:center;" | #F2CECE || style="background:#BFA3A3; color:black; text-align:center;" | #BFA3A3
|-
| style="background:#FF2A00; color:white; text-align:center;" | Hue: 10 || style="background:#FFF7F5; color:black; text-align:center;" | #FFF7F5 || style="background:#FFEAE6; color:black; text-align:center;" | #FFEAE6 || style="background:#F2D4CE; color:black; text-align:center;" | #F2D4CE || style="background:#BFA7A3; color:black; text-align:center;" | #BFA7A3
|-
| style="background:#FF5500; color:white; text-align:center;" | Hue: 20 || style="background:#FFF8F5; color:black; text-align:center;" | #FFF8F5 || style="background:#FFEEE6; color:black; text-align:center;" | #FFEEE6 || style="background:#F2DACE; color:black; text-align:center;" | #F2DACE || style="background:#BFACA3; color:black; text-align:center;" | #BFACA3
|-
| style="background:#FF8000; color:white; text-align:center;" | Hue: 30 || style="background:#FFFAF5; color:black; text-align:center;" | #FFFAF5 || style="background:#FFF2E6; color:black; text-align:center;" | #FFF2E6 || style="background:#F2E0CE; color:black; text-align:center;" | #F2E0CE || style="background:#BFB1A3; color:black; text-align:center;" | #BFB1A3
|-
| style="background:#FFAA00; color:black; text-align:center;" | Hue: 40 || style="background:#FFFCF5; color:black; text-align:center;" | #FFFCF5 || style="background:#FFF7E6; color:black; text-align:center;" | #FFF7E6 || style="background:#F2E6CE; color:black; text-align:center;" | #F2E6CE || style="background:#BFB6A3; color:black; text-align:center;" | #BFB6A3
|-
| style="background:#FFD500; color:black; text-align:center;" | Hue: 50 || style="background:#FFFDF5; color:black; text-align:center;" | #FFFDF5 || style="background:#FFFBE6; color:black; text-align:center;" | #FFFBE6 || style="background:#F2ECCE; color:black; text-align:center;" | #F2ECCE || style="background:#BFBAA3; color:black; text-align:center;" | #BFBAA3
|-
| style="background:#FFFF00; color:black; text-align:center;" | Hue: 60 || style="background:#FFFFF5; color:black; text-align:center;" | #FFFFF5 || style="background:#FFFFE6; color:black; text-align:center;" | #FFFFE6 || style="background:#F2F2CE; color:black; text-align:center;" | #F2F2CE || style="background:#BFBFA3; color:black; text-align:center;" | #BFBFA3
|-
| style="background:#D4FF00; color:black; text-align:center;" | Hue: 70 || style="background:#FDFFF5; color:black; text-align:center;" | #FDFFF5 || style="background:#FBFFE6; color:black; text-align:center;" | #FBFFE6 || style="background:#ECF2CE; color:black; text-align:center;" | #ECF2CE || style="background:#BABFA3; color:black; text-align:center;" | #BABFA3
|-
| style="background:#AAFF00; color:black; text-align:center;" | Hue: 80 || style="background:#FCFFF5; color:black; text-align:center;" | #FCFFF5 || style="background:#F7FFE6; color:black; text-align:center;" | #F7FFE6 || style="background:#E6F2CE; color:black; text-align:center;" | #E6F2CE || style="background:#B6BFA3; color:black; text-align:center;" | #B6BFA3
|-
| style="background:#80FF00; color:black; text-align:center;" | Hue: 90 || style="background:#FAFFF5; color:black; text-align:center;" | #FAFFF5 || style="background:#F2FFE6; color:black; text-align:center;" | #F2FFE6 || style="background:#E0F2CE; color:black; text-align:center;" | #E0F2CE || style="background:#B1BFA3; color:black; text-align:center;" | #B1BFA3
|-
| style="background:#5EFF00; color:black; text-align:center;" | Hue: 100 || style="background:#F8FFF5; color:black; text-align:center;" | #F8FFF5 || style="background:#EEFFE6; color:black; text-align:center;" | #EEFFE6 || style="background:#DAF2CE; color:black; text-align:center;" | #DAF2CE || style="background:#ACBFA3; color:black; text-align:center;" | #ACBFA3
|-
| style="background:#2BFF00; color:black; text-align:center;" | Hue: 110 || style="background:#F7FFF5; color:black; text-align:center;" | #F7FFF5 || style="background:#EAFFE6; color:black; text-align:center;" | #EAFFE6 || style="background:#D4F2CE; color:black; text-align:center;" | #D4F2CE || style="background:#A7BFA3; color:black; text-align:center;" | #A7BFA3
|-
| style="background:#00FF00; color:black; text-align:center;" | Hue: 120 || style="background:#F5FFF5; color:black; text-align:center;" | #F5FFF5 || style="background:#E6FFE6; color:black; text-align:center;" | #E6FFE6 || style="background:#CEF2CE; color:black; text-align:center;" | #CEF2CE || style="background:#A3BFA3; color:black; text-align:center;" | #A3BFA3
|-
| style="background:#00FF2A; color:black; text-align:center;" | Hue: 130 || style="background:#F5FFF7; color:black; text-align:center;" | #F5FFF7 || style="background:#E6FFEA; color:black; text-align:center;" | #E6FFEA || style="background:#CEF2D4; color:black; text-align:center;" | #CEF2D4 || style="background:#A3BFA7; color:black; text-align:center;" | #A3BFA7
|-
| style="background:#00FF55; color:black; text-align:center;" | Hue: 140 || style="background:#F5FFF8; color:black; text-align:center;" | #F5FFF8 || style="background:#E6FFEE; color:black; text-align:center;" | #E6FFEE || style="background:#CEF2DA; color:black; text-align:center;" | #CEF2DA || style="background:#A3BFAC; color:black; text-align:center;" | #A3BFAC
|-
| style="background:#00FF80; color:black; text-align:center;" | Hue: 150 || style="background:#F5FFFA; color:black; text-align:center;" | #F5FFFA || style="background:#E6FFF2; color:black; text-align:center;" | #E6FFF2 || style="background:#CEF2E0; color:black; text-align:center;" | #CEF2E0 || style="background:#A3BFB1; color:black; text-align:center;" | #A3BFB1
|-
| style="background:#00FFAA; color:black; text-align:center;" | Hue: 160 || style="background:#F5FFFC; color:black; text-align:center;" | #F5FFFC || style="background:#E6FFF7; color:black; text-align:center;" | #E6FFF7 || style="background:#CEF2E6; color:black; text-align:center;" | #CEF2E6 || style="background:#A3BFB6; color:black; text-align:center;" | #A3BFB6
|-
| style="background:#00FFD5; color:black; text-align:center;" | Hue: 170 || style="background:#F5FFFD; color:black; text-align:center;" | #F5FFFD || style="background:#E6FFFB; color:black; text-align:center;" | #E6FFFB || style="background:#CEF2EC; color:black; text-align:center;" | #CEF2EC || style="background:#A3BFBA; color:black; text-align:center;" | #A3BFBA
|-
| style="background:#00FFFF; color:black; text-align:center;" | Hue: 180 || style="background:#F5FFFF; color:black; text-align:center;" | #F5FFFF || style="background:#E6FFFF; color:black; text-align:center;" | #E6FFFF || style="background:#CEF2F2; color:black; text-align:center;" | #CEF2F2 || style="background:#A3BFBF; color:black; text-align:center;" | #A3BFBF
|-
| style="background:#00D5FF; color:black; text-align:center;" | Hue: 190 || style="background:#F5FDFF; color:black; text-align:center;" | #F5FDFF || style="background:#E6FBFF; color:black; text-align:center;" | #E6FBFF || style="background:#CEECF2; color:black; text-align:center;" | #CEECF2 || style="background:#A3BABF; color:black; text-align:center;" | #A3BABF
|-
| style="background:#00AAFF; color:white; text-align:center;" | Hue: 200 || style="background:#F5FCFF; color:black; text-align:center;" | #F5FCFF || style="background:#E6F7FF; color:black; text-align:center;" | #E6F7FF || style="background:#CEE6F2; color:black; text-align:center;" | #CEE6F2 || style="background:#A3B6BF; color:black; text-align:center;" | #A3B6BF
|-
| style="background:#0080FF; color:white; text-align:center;" | Hue: 210 || style="background:#F5FAFF; color:black; text-align:center;" | #F5FAFF || style="background:#E6F2FF; color:black; text-align:center;" | #E6F2FF || style="background:#CEE0F2; color:black; text-align:center;" | #CEE0F2 || style="background:#A3B1BF; color:black; text-align:center;" | #A3B1BF
|-
| style="background:#0055FF; color:white; text-align:center;" | Hue: 220 || style="background:#F5F8FF; color:black; text-align:center;" | #F5F8FF || style="background:#E6EEFF; color:black; text-align:center;" | #E6EEFF || style="background:#CEDAF2; color:black; text-align:center;" | #CEDAF2 || style="background:#A3ACBF; color:black; text-align:center;" | #A3ACBF
|-
| style="background:#002AFF; color:white; text-align:center;" | Hue: 230 || style="background:#F5F7FF; color:black; text-align:center;" | #F5F7FF || style="background:#E6EAFF; color:black; text-align:center;" | #E6EAFF || style="background:#CED4F2; color:black; text-align:center;" | #CED4F2 || style="background:#A3A7BF; color:black; text-align:center;" | #A3A7BF
|-
| style="background:#0000FF; color:white; text-align:center;" | Hue: 240 || style="background:#F5F5FF; color:black; text-align:center;" | #F5F5FF || style="background:#E6E6FF; color:black; text-align:center;" | #E6E6FF || style="background:#CECEF2; color:black; text-align:center;" | #CECEF2 || style="background:#A3A3BF; color:black; text-align:center;" | #A3A3BF
|-
| style="background:#2B00FF; color:white; text-align:center;" | Hue: 250 || style="background:#F7F5FF; color:black; text-align:center;" | #F7F5FF || style="background:#EAE6FF; color:black; text-align:center;" | #EAE6FF || style="background:#D4CEF2; color:black; text-align:center;" | #D4CEF2 || style="background:#A7A3BF; color:black; text-align:center;" | #A7A3BF
|-
| style="background:#5500FF; color:white; text-align:center;" | Hue: 260 || style="background:#F8F5FF; color:black; text-align:center;" | #F8F5FF || style="background:#EEE6FF; color:black; text-align:center;" | #EEE6FF || style="background:#DACEF2; color:black; text-align:center;" | #DACEF2 || style="background:#ACA3BF; color:black; text-align:center;" | #ACA3BF
|-
| style="background:#8000FF; color:white; text-align:center;" | Hue: 270 || style="background:#FAF5FF; color:black; text-align:center;" | #FAF5FF || style="background:#F2E6FF; color:black; text-align:center;" | #F2E6FF || style="background:#E0CEF2; color:black; text-align:center;" | #E0CEF2 || style="background:#B1A3BF; color:black; text-align:center;" | #B1A3BF
|-
| style="background:#AA00FF; color:white; text-align:center;" | Hue: 280 || style="background:#FCF5FF; color:black; text-align:center;" | #FCF5FF || style="background:#F7E6FF; color:black; text-align:center;" | #F7E6FF || style="background:#E6CEF2; color:black; text-align:center;" | #E6CEF2 || style="background:#B6A3BF; color:black; text-align:center;" | #B6A3BF
|-
| style="background:#D400FF; color:white; text-align:center;" | Hue: 290 || style="background:#FDF5FF; color:black; text-align:center;" | #FDF5FF || style="background:#FBE6FF; color:black; text-align:center;" | #FBE6FF || style="background:#ECCEF2; color:black; text-align:center;" | #ECCEF2 || style="background:#BAA3BF; color:black; text-align:center;" | #BAA3BF
|-
| style="background:#FF00FF; color:white; text-align:center;" | Hue: 300 || style="background:#FFF5FF; color:black; text-align:center;" | #FFF5FF || style="background:#FFE6FF; color:black; text-align:center;" | #FFE6FF || style="background:#F2CEF2; color:black; text-align:center;" | #F2CEF2 || style="background:#BFA3BF; color:black; text-align:center;" | #BFA3BF
|-
| style="background:#FF00D4; color:white; text-align:center;" | Hue: 310 || style="background:#FFF5FD; color:black; text-align:center;" | #FFF5FD || style="background:#FFE6FB; color:black; text-align:center;" | #FFE6FB || style="background:#F2CEEC; color:black; text-align:center;" | #F2CEEC || style="background:#BFA3BA; color:black; text-align:center;" | #BFA3BA
|-
| style="background:#FF00AA; color:white; text-align:center;" | Hue: 320 || style="background:#FFF5FC; color:black; text-align:center;" | #FFF5FC || style="background:#FFE6F7; color:black; text-align:center;" | #FFE6F7 || style="background:#F2CEE6; color:black; text-align:center;" | #F2CEE6 || style="background:#BFA3B6; color:black; text-align:center;" | #BFA3B6
|-
| style="background:#FF0080; color:white; text-align:center;" | Hue: 330 || style="background:#FFF5FA; color:black; text-align:center;" | #FFF5FA || style="background:#FFE6F2; color:black; text-align:center;" | #FFE6F2 || style="background:#F2CEE0; color:black; text-align:center;" | #F2CEE0 || style="background:#BFA3B1; color:black; text-align:center;" | #BFA3B1
|-
| style="background:#FF0055; color:white; text-align:center;" | Hue: 340 || style="background:#FFF5F8; color:black; text-align:center;" | #FFF5F8 || style="background:#FFE6EE; color:black; text-align:center;" | #FFE6EE || style="background:#F2CEDA; color:black; text-align:center;" | #F2CEDA || style="background:#BFA3AC; color:black; text-align:center;" | #BFA3AC
|-
| style="background:#FF002B; color:white; text-align:center;" | Hue: 350 || style="background:#FFF5F7; color:black; text-align:center;" | #FFF5F7 || style="background:#FFE6EA; color:black; text-align:center;" | #FFE6EA || style="background:#F2CED4; color:black; text-align:center;" | #F2CED4 || style="background:#BFA3A7; color:black; text-align:center;" | #BFA3A7
|-
| style="background:#000000; color:white; text-align:center;" | H: 0 S: 0 || style="background:#FFFFFF; color:black; text-align:center;" | #FFFFFF || style="background:#F9F9F9; color:black; text-align:center;" | #F9F9F9 || style="background:#F2F2F2; color:black; text-align:center;" | #F2F2F2 || style="background:#BFBFBF; color:black; text-align:center;" | #BFBFBF
|}

===Example color schemes===
====Wikipedia====
Wikipedia uses this colour scheme on its [[Main Page]]. 
{{block indent|left=1.5|1=''Note: the colour for the border of the lighter boxes is also the colour of the backgrounds of the darker (title) boxes.''}}
<!-- legacy XHTML table visible with any browser -->
{|
|-
| Hue: 150
| style="background:#F5FFFA; border:1px solid #CEF2E0; padding:1em; margin:auto;"| background:<kbd>#F5FFFA</kbd> border:<kbd>#CEF2E0</kbd> || style="background:#cef2e0;"| &#160;
| style="background:#CEF2E0; border:1px solid #A3BFB1; padding:1em; margin:auto;"| background:<kbd>#CEF2E0</kbd> border:<kbd>#A3BFB1</kbd> || style="background:#A3BFB1;"| &#160;
|-
| Hue: 210
| style="background:#F5FAFF; border:1px solid #CEE0F2; padding:1em; margin:auto;"| background:<kbd>#F5FAFF</kbd> border:<kbd>#CEE0F2</kbd> || style="background:#cedff2;"| &#160;
| style="background:#CEE0F2; border:1px solid #A3B1BF; padding:1em; margin:auto;"| background:<kbd>#CEE0F2</kbd> border:<kbd>#A3B1BF</kbd> || style="background:#A3B1BF;"| &#160;
|-
| Hue: 270
| style="background:#FAF5FF; border:1px solid #E0CEF2; padding:1em; margin:auto;"| background:<kbd>#FAF5FF</kbd> border:<kbd>#E0CEF2</kbd> || style="background:#E0CEF2;"| &#160;
| style="background:#E0CEF2; border:1px solid #B1A3BF; padding:1em; margin:auto;"| background:<kbd>#E0CEF2</kbd> border:<kbd>#B1A3BF</kbd> || style="background:#B1A3BF;"| &#160;
|-
| Hue: 330
| style="background:#FFF5FA; border:1px solid #F2CEE0; padding:1em; margin:auto;"| background:<kbd>#FFF5FA</kbd> border:<kbd>#F2CEE0</kbd> || style="background:#F2CEE0;"| &#160;
| style="background:#F2CEE0; border:1px solid #BFA3B1; padding:1em; margin:auto;"| background:<kbd>#F2CEE0</kbd> border:<kbd>#BFA3B1</kbd> || style="background:#BFA3B1;"| &#160;
|}

And additionally on the [[w:Wikipedia:Community Portal|Community Portal]]:
{|
|-
| Hue: 030
| style="background:#FFFAF5; border:1px solid #F2E0CE; padding:1em; margin:auto;"| background:<kbd>#FFFAF5</kbd> border:<kbd>#F2E0CE</kbd> || style="background:#F2E0CE;"| &#160;
| style="background:#F2E0CE; border:1px solid #BFB1A3; padding:1em; margin:auto;"| background:<kbd>#F2E0CE</kbd> border:<kbd>#BFB1A3</kbd> || style="background:#BFB1A3;"| &#160;
|}

Additional 3-colour palettes using this same generation scheme are at the top of the talk page. In the Monobook skin, the background colour of Wikipedia pages is #F8FCFF. In the Vector skin, the background colour on all pages is #FFFFFF.

====Commons====
The Wikimedia Commons uses this colour scheme on [[:commons:Main Page]] and [[:commons: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.
{| cellspacing="0" cellpadding="0" style="margin:0 0 1em; width:100% background:white;"
| style="width:50%; vertical-align:top; border:1px solid #abd5f5; background:#f1f5fc;"|
<div style="border-bottom:1px solid #abd5f5; background:#d0e5f5; padding:0.2em 0.5em; font-size:110%; font-weight:bold;">background colour: #d0e5f5</div>
<div style="border-bottom:1px solid #abd5f5; padding:0.4em 1em 1em;">
background colour: #f1f5fc<br />
border colour: #abd5f5</div>
| style="padding:0 0.5em;"|

<!-- Right column 3 orange -->
| style="width:50%; vertical-align:top; border:1px solid #fad67d; background:#faf6ed;"|
<div style="border-bottom:1px solid #fad67d; background:#faecc8; padding:0.2em 0.5em; font-size:110%; font-weight:bold;">background colour: #faecc8</div>
<div style="border-bottom:1px solid #fad67d; padding:0.4em 1em 1em;">
background colour: #faf6ed<br />
border colour: #fad67d</div>
|}

==Schemes for colour-blind readers==
{{Shortcut|H:Colorblind}}
Approximately 1 in 12 men and 1 in 200 women with Northern European ancestry have [[w:color blindness#Red–green colour blindness|red-green colour blindness]]; this and other types affect people worldwide. 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 also [[:Commons:Commons:Creating accessible illustrations]] for color blind friendly palettes.

{| border=1 cellpadding=4 style="border-collapse: collapse; border: 1px solid black;"
|- style="vertical-align:top;text-align:center;"
! Colour 1 !! Colour 2 !! Colour 3 !! Colour 4 !! Colour 5
|-
| rowspan="4" style="background: white; color: black;" | White
| rowspan="4" style="background: yellow; color: black;"| Yellow
| rowspan="2" style="background: blue; color: white;" | Blue
| style="background: red; color: white;" | Red
| rowspan="4" style="background: black; color: white;" | Black
|-
| style="background: green; color: white;" | Green
|-
| rowspan="2" style="background: purple; color: white;" | Purple
| style="background: brown; color: white;" | Brown
|-
| style="background: grey; color: black;" | Grey
|}

* Pick a maximum of one colour from each column. Do not use more than one colour from any one column.
* Use large expanses of the colour. If you're colouring text, use bold and a large font.
* For small expanses of colour, such as thin lines, clearly label them with text, or use non-colour techniques such as font styles (bold or italic), line styles (dots and dashes) or cross-hatching (stripes, [[w:checkerboard|checkers]] or [[w:polka-dot|polka-dot]]s).
* Use bright mid-range colours, like children's crayons. Do not use light or dark variants of the colours.
* If you need more colours... hard luck. Instead use non-colour techniques such as labelling, font styles (bold or italic), line styles (dots and dashes) or cross-hatching (stripes, checkers or polka-dots).
* If you are colour-blind yourself, check your revised image with a colour-sighted person to confirm the meaning is intact.

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:
* [https://addons.mozilla.org/en-US/firefox/search/?q=Colorblind&cat=all Mozilla Firefox color-blind addons]
* [https://michelf.ca/projects/sim-daltonism/ Sim Daltonism] simulates color blind vision and displays the results in a floating palette for macOS and iOS. Freeware.
* [https://www.colororacle.org/ Color Oracle] downloadable, free color blindness simulator for Windows, Mac and Linux. Freeware.

==Color Representation==
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 "<span style="color: red">hot</span>, <span style="color: blue">cold</span>" will be easier to understand than the reverse (<span style="color: blue">hot</span>, <span style="color: red">cold</span>).

==See also==
===Templates===
*To colour text and background:
** {{tl|Font color}}
** {{tl|background color}}
** {{tl|font}}
*To provide example squares of colour:
** {{tl|Color sample}}
** {{tl|Swatch}}
** {{tl|Swatch inline}}
* To provide a list colors
** {{tl|Colornames}}
** {{tl|Formula Supported Named Colors}}
** {{tl|X11 color chart}}
** {{tl|Web Colors}}

===Wikipedia articles===
* [[w:Color picker|Color picker]]
* [[w:Web colors|Web colors]]
* [[w:HTML color names|HTML color names]]

[[Category:Help]]