Help:Using colours: Difference between revisions

Revision as of 06:46, 31 January 2025

Revision as of 23:08, 11 February 2025

Line 2:

{{about|the use of colours in articles|the civility essay dealing with colours|Wikipedia:Don't edit war over the colour of templates|guidelines on colour use|MOS:COLOUR|the help page about link color|H:LC|the help page about user contributions|WP:UCP}}

{{Wikipedia how to|HELP:COLOR|WP:COLOURS|H:UC}}

{{Warning|1={{big|'''LinksRefrain shouldfrom clearlychanging bethe identifiablecolor asof links toas readers'''.}}<br />Refrain from implementing coloured links thatit may impede userthe reader's ability to distinguish links from regular text,. orParticularly refrain from colourcolouring links for purely aesthetic reasons. See the guides[[MOS:ACCESS|Manual toof editingStyle articlesguideline foron accessibility at]], [[WP:CONTRAST|contrast]],using [[Wikipedia:Manualcolor ofin Style/Accessibility|accessibilityarticles]], and [[WP:NAVBOXCOLOUR|navboxusing colorscolor in navboxes]].|header=Links should clearly be identifiable as links to readers.|headstyle=font-size:120%}}

To use a colour in a [[wikipedia:template|template]] or [[wikipedia:table|table]] you can use the [[hex triplet]] (e.g. bronze{{Mono|#CD7F32}} is #CD7F32bronze) or [[HTML color names|HTML color name]] (e.g. red).

Editors are encouraged to make use of [[Brewer palettes]] for charts, maps, and other entities, using '''[https://colorbrewer2.org/ this tool]'''.

Line 12:

<code><nowiki><span style="color:</nowiki>''hex triplet or colour name''<nowiki>">text</span></nowiki></code>

Note that you can'tcannot use the British spelling, "colour", in this context.

Examples:

*<code>'''<nowiki><span style="color:red"></nowikicode>{{Highlight round|red|bc=#eaecf0}}<code>">'''red writing'''<nowiki></span></nowiki>'''</code> shows as <span style="color:red">red writing</span>

*<code>'''<nowiki><span style="color:{{Highlight round|#0f0|bc=#eaecf0}}"></nowiki>'''green writing'''<nowiki></span></nowiki>'''</code> shows as <span style="color:#0f0">green writing</span>

*<code>'''<nowiki><span style="color:{{Highlight round|#0000FF|bc=#eaecf0}}"></nowiki>'''blue writing'''<nowiki></span></nowiki>'''</code> shows as <span style="color:#0000FF">blue writing</span>

===Template font colour {{anchors|Template font color}}===

Line 30:

|{{font color|red|yellow|This text is different}}<br>to change text and background color

|<nowiki>{{font color||yellow|This text is different}}</nowiki>

|{{font color||yellow|This text is different}}<br>to change background color only<br>'''noteNote''' the two pipe-characters <code>&#124;&#124;</code> to keep the text color at default.

}}

Line 151:

|}

Additional 3-colour palettes using this same generation scheme are at the top of the [[Help talk:Using colours|talk page]]. In the [[Wikipedia:Monobook|Monobook skin]], the background colour of Wikipedia pages is {{Mono|#F8FCFF}}. In the [[Wikipedia:Vector 2022|Vector 2022]] skin, the background colour on all pages is {{Mono|#FFFFFF}}.

===Commons===

Line 171:

|}

=== Wikimedia Foundation ===

The Wikimedia Foundation Design team has [[wmdoc:codex/latest/style-guide/colors.html|provided a color palette]] with colors 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.

==Accessibility==

{{main|Wikipedia:Manual of Style/Accessibility/Colors}}

It is best to choose background colors that offer sufficient contrast in relation to text and [[Help:Link color|blue links]], which is also the color of references, both of which are very common in most articles. Use the [https://webaim.org/resources/linkcontrastchecker/?fcolor=202122&bcolor=FFFFFF&lcolor=3366CC WCAG link contrast checker] to ensure that the chosen background color offers the recommended WCAG AA level of contrast against normal text ({{Legend inline|#202122|{{mono|#202122}}}}) and blue links ({{Legend inline|#3366CC|{{mono|#3366CC}}}} for the default [[Wikipedia:Vector 2022|Vector 2022]] skin).<ref>{{cite web |title=WCAG 2.0 and Link Colors |url=https://webaim.org/blog/wcag-2-0-and-link-colors/ |website=WebAIM Blog |publisher=WebAIM |date=22 July 2009}}</ref>

{| class="wikitable plainrowheaders" style="text-align: center;"

|+ Compatible WCAG AAA background colors against text and links