Content deleted Content added
→Template font colour {{anchors|Template font color}}: fix dark mode via {{markup}} |
|||
Line 171:
|}
==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 (#202122) and blue links (#3366CC for the default 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
|-
! scope="col" colspan=4 | Base color
! scope="col" colspan=3 | Darkest backgrounds for dark text
! scope="col" rowspan="2" style="max-width: 7em;" | Lightest background for white text
|-
! scope="col" | Name
! scope="col" | [[HSL and HSV|Hue]]
! scope="col" | [[Hex triplet|Hex]]
! scope="col" | Color
! scope="col" | Text and [[Help:Link color|links]]<br/>(WCAG AA)
! scope="col" | Text only
! scope="col" | Pure black text<br/>(not default)
|-
! scope="row" | Red
| 0°
| FF0000
| style="background-color:#FF0000" |
| style="background-color:#FFE6E6; color:#3366CC;" | FFE6E6
| style="background-color:#FF8888;" | FF8888
| style="background-color:#FF6060; color:#000;" | FF6060
| style="background-color:#B60000; color:#FFF;" | B60000
|-
! scope="row" | Orange
| 30°
| FF8000
| style="background-color:#FF8000" |
| style="background-color:#FFE8D0; color:#3366CC;" | FFE8D0
| style="background-color:#FF8E1C;" | FF8E1C
| style="background-color:#E97500; color:#000;" | E97500
| style="background-color:#8C4600; color:#FFF;" | 8C4600
|-
! scope="row" | Yellow
| 60°
| FFFF00
| style="background-color:#FFFF00" |
| style="background-color:#F3F300; color:#3366CC;" | F3F300
| style="background-color:#B1B100;" | B1B100
| style="background-color:#9B9B00; color:#000;" | 9B9B00
| style="background-color:#5C5C00; color:#FFF;" | 5C5C00
|-
! scope="row" | Chartreuse
| 90°
| 80FF00
| style="background-color:#80FF00" |
| style="background-color:#B9FF72; color:#3366CC;" | B9FF72
| style="background-color:#61C100;" | 61C100
| style="background-color:#54A900; color:#000;" | 54A900
| style="background-color:#326500; color:#FFF;" | 326500
|-
! scope="row" | Green
| 120°
| 00FF00
| style="background-color:#00FF00" |
| style="background-color:#ABFFAB; color:#3366CC;" | ABFFAB
| style="background-color:#00C700;" | 00C700
| style="background-color:#00AE00; color:#000;" | 00AE00
| style="background-color:#006800; color:#FFF;" | 006800
|-
! scope="row" | Spring green
| 150°
| 00FF80
| style="background-color:#00FF80" |
| style="background-color:#9DFFCE; color:#3366CC;" | 9DFFCE
| style="background-color:#00C563;" | 00C563
| style="background-color:#00AC56; color:#000;" | #00AC56
| style="background-color:#006733; color:#FFF;" | 006733
|-
! scope="row" | Cyan
| 180°
| 00FFFF
| style="background-color:#00FFFF" |
| style="background-color:#7DFFFF; color:#3366CC;" | 7DFFFF
| style="background-color:#00BFBF;" | 00BFBF
| style="background-color:#00A6A6; color:#000;" | 00A6A6
| style="background-color:#006363; color:#FFF;" | 006363
|-
! scope="row" | Azure
| 210°
| 0080FF
| style="background-color:#0080FF" |
| style="background-color:#DCEEFF; color:#3366CC;" | DCEEFF
| style="background-color:#60B0FF;" | 60B0FF
| style="background-color:#3098FF; color:#000;" | 3098FF
| style="background-color:#0057AF; color:#FFF;" | 0057AF
|-
! scope="row" | Blue
| 240°
| 0000FF
| style="background-color:#0000FF" |
| style="background-color:#EAEAFF; color:#3366CC;" | EAEAFF
| style="background-color:#A2A2FF;" | A2A2FF
| style="background-color:#8888FF; color:#000;" | 8888FF
| style="background-color:#3030FF; color:#FFF;" | 3030FF
|-
! scope="row" | Violet
| 270°
| 8000FF
| style="background-color:#8000FF" |
| style="background-color:#F3E7FF; color:#3366CC;" | F3E7FF
| style="background-color:#C994FF;" | C994FF
| style="background-color:#B974FF; color:#000;" | B974FF
| style="background-color:#7600EC; color:#FFF;" | 7600EC
|-
! scope="row" | Magenta
| 300°
| FF00FF
| style="background-color:#FF00FF" |
| style="background-color:#FFE3FF; color:#3366CC;" | FFE3FF
| style="background-color:#FF73FF;" | FF73FF
| style="background-color:#FF29FF; color:#000;" | FF29FF
| style="background-color:#9F009F; color:#FFF;" | 9F009F
|-
! scope="row" | Rose
| 330°
| FF0080
| style="background-color:#FF0080" |
| style="background-color:#FFE4F1; color:#3366CC;" | FFE4F1
| style="background-color:#FF81C0;" | FF81C0
| style="background-color:#FF52A8; color:#000;" | FF52A8
| style="background-color:#B00058; color:#FFF;" | B00058
|-
! scope="row" | Grey
| —
| 808080
| style="background-color:#808080" |
| style="background-color:#EBEBEB; color:#3366CC;" | EBEBEB
| style="background-color:#ABABAB;" | ABABAB
| style="background-color:#959595; color:#000;" | 959595
| style="background-color:#595959; color:#FFF;" | 595959
|}
===Schemes for colour-blind readers===
{{Shortcut|H:Colorblind}}
Approximately 1 in 12 men and 1 in 200 women with Northern European ancestry have [[color blindness#Red–green colour blindness|red-green colour blindness]]; this and other types affect people worldwide.<ref>{{Cite web|last=|first=|date=1 January 2015|title=Color Vision Deficiency|url=https://medlineplus.gov/genetics/condition/color-vision-deficiency/#frequency|archive-url=|archive-date=|access-date=29 January 2021|website=MedlinePlus|publisher=U.S. National Library of Medicine}}</ref> 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.
| |||