Help:Using colours: Difference between revisions

Revision as of 12:06, 7 March 2025

Latest revision as of 21:04, 20 August 2025

(15 intermediate revisions by 4 users not shown)

Line 4:

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

{{Warning link color}}

{{Notice|Editors are encouraged to use the tools listed at [[MOS:COLOR]], such as the [[Wikipedia:Manual of Style/Accessibility#Additional tools for color scheme selection|tools for color scheme selection]], to make illustrations and webpages more accessible.}}

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

Line 38 ⟶ 37:

==<span id="Color generation guide">Colour generation guide</span>==

{{Hatnotefor|[[MOS:COLOR]] contains a [[Wikipedia:Manuallist of Style/Accessibility#Additional tools for color scheme selection and creation|list of#Additional tools for color scheme selection]] and creation.}}

The method used for selecting the colors for various top-level pages, e.g. [[Main Page]], [[Wikipedia:Community Portal|Community Portal]], [[Wikipedia:Contents|Contents]], and [[Help:Contents]].<br />The 3 colours are generated using the [[HSV colour space]], then translated into [[RGB color model|RGB]].

Line 373 ⟶ 372:

*{{cite web |title=Elegant Figures - Subtleties of Color (Part 1 of 6) |url=https://earthobservatory.nasa.gov/blogs/elegantfigures/2013/08/05/subtleties-of-color-part-1-of-6/ |website=earthobservatory.nasa.gov |language=en |date=1 February 2020}}

*{{cite journal |last1=Rougier |first1=Nicolas P. |last2=Droettboom |first2=Michael |last3=Bourne |first3=Philip E. |title=Ten Simple Rules for Better Figures |journal=PLOS Computational Biology |date=11 September 2014 |volume=10 |issue=9 |pages=e1003833 |doi=10.1371/journal.pcbi.1003833 |pmid=25210732 |pmc=4161295 |bibcode=2014PLSCB..10E3833R |doi-access=free }}

== Contrast checking tools ==

{{seealso|Wikipedia:Manual of Style/Accessibility/CSS colors for text on white}}

{{see|Wikipedia:Tools}}

{{short|WP:COLORTOOLS|H:COLORTOOLS}}

You can use an online tool or software to check the color contrast ratio:<!-- Limit to 3 to 5 -->

* {{URL|https://webaim.org/resources/contrastchecker/|WebAIM contrast checker}}

* {{URL|https://whocanuse.com/|WhoCanUse}}

* [[File:Font Awesome 5 solid laptop-code.svg|18px|Warning: External software program]]{{nbsp}}{{URL|https://www.tpgi.com/color-contrast-checker/|Color contrast analyser application}}

Before using a tool, check if it supports [[Web Content Accessibility Guidelines|WCAG 2.0]], as older tools based on WCAG 1.0 are outdated.

==== Additional tools for color scheme selection ====

* [[wmdoc:codex/latest/style-guide/colors.html|Codex Style Guide for Wikimedia]]

* Chrome {{URL|https://developer.chrome.com/docs/devtools/accessibility/contrast|color contrast debugger}} (with a visual guide and built-in color-picker).

* {{URL|https://www.tpgi.com/color-contrast-checker/|Color contrast analyser}} (downloadable software for precise contrast checks; be sure to only use the up-to-date "luminosity" algorithm, and not the "color brightness/difference", which is outdated.).

* {{URL|https://paletton.com/|Paletton}} (formerly Color Scheme Designer) helps select suitable color schemes for a graphical chart.

* {{URL|https://colorbrewer2.org/|Color Brewer 2.0}} provides color-blind-friendly color schemes for maps.

* {{URL|https://personal.sron.nl/~pault/#fig:scheme_light|Light qualitative color scheme}} provides a set of nine colors that work well for color-blind users and black text labels.

* {{URL|https://www.toptal.com/designers/colorfilter|ColorFilter}} simulates color-blind vision

* {{URL|https://www.color-blindness.com/coblis-color-blindness-simulator/|Coblis Color-blindness simulator}}

* Firefox {{URL|https://addons.mozilla.org/en-US/firefox/addon/nocoffee/|NoCoffee}}

==== Color palettes ====

The Wikimedia Foundation Design team {{URL|https://doc.wikimedia.org/codex/latest/style-guide/colors.html|has 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 color.

For AAA-compliant color pairings for different text types (black text, white text, links, and visited links), refer to the table at [[Wikipedia:Manual of Style/Accessibility/Colors]]. For named CSS-based text colors on a white background, refer to [[Wikipedia:Manual of Style/Accessibility/CSS colors for text on white|Wikipedia:Manual of Style/Accessibility/CSS colors]] for recommended colors

==See also==