Wikipedia

Help:Using colours: Difference between revisions

Browse history interactively
← Previous edit
Content deleted Content added
VisualWikitext
→Commons: same style as table in previous subsection
→Colour generation guide: it's not in page linked
 
(17 intermediate revisions by 5 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 48 ⟶ 47:
! &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
|}
 
Line 208 ⟶ 207:
! scope="row" | Red
| 0°
| {{Mono|#FF0000}}
| style="background-color:#FF0000" |
| style="background-color:#FFE6E6; color:#3366CC;" | {{Mono|#FFE6E6}}
| style="background-color:#FF8888;" | {{Mono|#FF8888}}
| style="background-color:#FF6060; color:#000;" | {{Mono|#FF6060}}
| style="background-color:#B60000; color:#FFF;" | {{Mono|#B60000}}
|-
! scope="row" | Orange
| 30°
| {{Mono|#FF8000}}
| style="background-color:#FF8000" |
| style="background-color:#FFE8D0; color:#3366CC;" | {{Mono|#FFE8D0}}
| style="background-color:#FF8E1C;" | {{Mono|#FF8E1C}}
| style="background-color:#E97500; color:#000;" | {{Mono|#E97500}}
| style="background-color:#8C4600; color:#FFF;" | {{Mono|#8C4600}}
|-
! scope="row" | Yellow
| 60°
| {{Mono|#FFFF00}}
| style="background-color:#FFFF00" |
| style="background-color:#F3F300; color:#3366CC;" | {{Mono|#F3F300}}
| style="background-color:#B1B100;" | {{Mono|#B1B100}}
| style="background-color:#9B9B00; color:#000;" | {{Mono|#9B9B00}}
| style="background-color:#5C5C00; color:#FFF;" | {{Mono|#5C5C00}}
|-
! scope="row" | Chartreuse
| 90°
| {{Mono|#80FF00}}
| style="background-color:#80FF00" |
| style="background-color:#B9FF72; color:#3366CC;" | {{Mono|#B9FF72}}
| style="background-color:#61C100;" | {{Mono|#61C100}}
| style="background-color:#54A900; color:#000;" | {{Mono|#54A900}}
| style="background-color:#326500; color:#FFF;" | {{Mono|#326500}}
|-
! scope="row" | Green
| 120°
| {{Mono|#00FF00}}
| style="background-color:#00FF00" |
| style="background-color:#ABFFAB; color:#3366CC;" | {{Mono|#ABFFAB}}
| style="background-color:#00C700;" | {{Mono|#00C700}}
| style="background-color:#00AE00; color:#000;" | {{Mono|#00AE00}}
| style="background-color:#006800; color:#FFF;" | {{Mono|#006800}}
|-
! scope="row" | Spring green
| 150°
| {{Mono|#00FF80}}
| style="background-color:#00FF80" |
| style="background-color:#9DFFCE; color:#3366CC;" | {{Mono|#9DFFCE}}
| style="background-color:#00C563;" | {{Mono|#00C563}}
| style="background-color:#00AC56; color:#000;" | {{Mono|#00AC56}}
| style="background-color:#006733; color:#FFF;" | {{Mono|#006733}}
|-
! scope="row" | Cyan
| 180°
| {{Mono|#00FFFF}}
| style="background-color:#00FFFF" |
| style="background-color:#7DFFFF; color:#3366CC;" | {{Mono|#7DFFFF}}
| style="background-color:#00BFBF;" | {{Mono|#00BFBF}}
| style="background-color:#00A6A6; color:#000;" | {{Mono|#00A6A6}}
| style="background-color:#006363; color:#FFF;" | {{Mono|#006363}}
|-
! scope="row" | Azure
| 210°
| {{Mono|#0080FF}}
| style="background-color:#0080FF" |
| style="background-color:#DCEEFF; color:#3366CC;" | {{Mono|#DCEEFF}}
| style="background-color:#60B0FF;" | {{Mono|#60B0FF}}
| style="background-color:#3098FF; color:#000;" | {{Mono|#3098FF}}
| style="background-color:#0057AF; color:#FFF;" | {{Mono|#0057AF}}
|-
! scope="row" | Blue
| 240°
| {{Mono|#0000FF}}
| style="background-color:#0000FF" |
| style="background-color:#EAEAFF; color:#3366CC;" | {{Mono|#EAEAFF}}
| style="background-color:#A2A2FF;" | {{Mono|#A2A2FF}}
| style="background-color:#8888FF; color:#000;" | {{Mono|#8888FF}}
| style="background-color:#3030FF; color:#FFF;" | {{Mono|#3030FF}}
|-
! scope="row" | Violet
| 270°
| {{Mono|#8000FF}}
| style="background-color:#8000FF" |
| style="background-color:#F3E7FF; color:#3366CC;" | {{Mono|#F3E7FF}}
| style="background-color:#C994FF;" | {{Mono|#C994FF}}
| style="background-color:#B974FF; color:#000;" | {{Mono|#B974FF}}
| style="background-color:#7600EC; color:#FFF;" | {{Mono|#7600EC}}
|-
! scope="row" | Magenta
| 300°
| {{Mono|#FF00FF}}
| style="background-color:#FF00FF" |
| style="background-color:#FFE3FF; color:#3366CC;" | {{Mono|#FFE3FF}}
| style="background-color:#FF73FF;" | {{Mono|#FF73FF}}
| style="background-color:#FF29FF; color:#000;" | {{Mono|#FF29FF}}
| style="background-color:#9F009F; color:#FFF;" | {{Mono|#9F009F}}
|-
! scope="row" | Rose
| 330°
| {{Mono|#FF0080}}
| style="background-color:#FF0080" |
| style="background-color:#FFE4F1; color:#3366CC;" | {{Mono|#FFE4F1}}
| style="background-color:#FF81C0;" | {{Mono|#FF81C0}}
| style="background-color:#FF52A8; color:#000;" | {{Mono|#FF52A8}}
| style="background-color:#B00058; color:#FFF;" | {{Mono|#B00058}}
|-
! scope="row" | Grey
| —
| {{Mono|808080}}
| style="background-color:#808080" |
| style="background-color:#EBEBEB; color:#3366CC;" | {{Mono|#EBEBEB}}
| style="background-color:#ABABAB;" | {{Mono|#ABABAB}}
| style="background-color:#959595; color:#000;" | {{Mono|#959595}}
| style="background-color:#595959; color:#FFF;" | {{Mono|#595959}}
|}
 
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==
Retrieved from "https://en.wikipedia.org/wiki/Help:Using_colours"