Tachyony: Imported page

2022-01-19T15:10:42Z

Imported page

New page

{{short description|Table of colours which are WCAG AAA compatible for 14 different hues}}
{{redirect|MOS:COLORS|the MOS guideline|MOS:COLOR}}
{{Wikipedia how-to|interprets=Wikipedia:Manual of Style/Accessibility|sc1=MOS:COLORS}}

This table of colours are [[WCAG]] AAA compatible for 14 different hues{{snd}} the 12 colours at 30° intervals, plus grey and brown. In each row, the "base colour" is the simplest representation of the hue. This will help editors to select accessible backgrounds that match a wide range of colour schemes.

In most articles, it is common to have text with references that use the same [[Help:Link color|blue link color]] used for links to other articles. Therefore, it is best to choose colors that offer sufficient contrast, at least in relation to text and unvisited links.

The "'''darkest AAA background for normal text'''" column is the darkest shade of that hue which meets the full WCAG AAA standard for (i) Brightness Difference, (ii) Colour Difference, (iii) Contrast Ratio, as measured by [http://snook.ca/technical/colour_contrast/colour.html Snook's Colour Contrast Check] when used with the colour of normal text (#202122). Any lighter shade of that hue (i.e. larger hexadecimal numbers in the #RRGGBB representation) will exceed AAA standards. When links and references are not present, extra contrast is possible by setting the text color to pure black (#000000).

The same applies to the "'''darkest AAA background for unvisited links'''" column when used with the default linked text for Vector skin (#0645AD), although the "'''darkest AAA background for visited links'''" column also needs to be consulted because the default colour for visited linked text using Vector skin is #0B0080.

If a dark background is desired, then it should ideally be presented against white text. The column "'''lightest AAA background for white text'''" shows the lightest that the background can be for each hue to maintain AAA compliance against white text. Any darker shade of that hue (i.e. smaller hexadecimal numbers in the #RRGGBB representation) will exceed AAA standards. Links are not suited to be used with their default colours on a dark background.

{| class="wikitable plainrowheaders" style="text-align: center;"
|+ WCAG AAA compatible background colours against dark and light text and links
|-
! scope="col" colspan=4 | Base colour
! scope="col" colspan=4 | Darkest AAA background
! scope="col" | Lightest AAA background
|-
! scope="col" | Name
! scope="col" | Hue
! scope="col" | Hex
! scope="col" | Colour
! scope="col" | Unvisited links
! scope="col" | Visited links
! scope="col" | Normal text
! scope="col" | Pure black text
! scope="col" | White text
|-
! scope="row" | Red
| 0°
| #FF0000
| style="background-color:#FF0000" |
| style="background-color:#FFE3E3; color:#0645AD;" | #FFE3E3
| style="background-color:#FF8B8B; color:#0B0080;" | #FF8B8B
| style="background-color:#FF8888;" | #FF8888
| style="background-color:#FF6060; color:#000;" | #FF6060
| style="background-color:#B60000; color:#FFF;" | #B60000
|-
! scope="row" | Orange or brown
| 30°
| #FF8000
| style="background-color:#FF8000" |
| style="background-color:#FFE5CC; color:#0645AD;" | #FFE5CC
| style="background-color:#FF9123; color:#0B0080;" | #FF9123
| 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:#F1F100; color:#0645AD;" | #F1F100
| style="background-color:#B3B300; color:#0B0080;" | #B3B300
| 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:#AEFF5C; color:#0645AD;" | #AEFF5C
| style="background-color:#61C300; color:#0B0080;" | #61C300
| 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:#9EFF9E; color:#0645AD;" | #9EFF9E
| style="background-color:#00C900; color:#0B0080;" | #00C900
| 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:#8DFFC6; color:#0645AD;" | #8DFFC6
| style="background-color:#00C763; color:#0B0080;" | #00C763
| 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:#60FFFF; color:#0645AD;" | #60FFFF
| style="background-color:#00C0C0; color:#0B0080;" | #00C0C0
| style="background-color:#00BFBF;" | #00BFBF
| style="background-color:#00A6A6; color:#000;" | #00A6A6
| style="background-color:#006363; color:#FFF;" | #006363
|-
! scope="row" | Dodger blue
| 210°
| #0080FF
| style="background-color:#0080FF" |
| style="background-color:#D4ECFF; color:#0645AD;" | #D4ECFF
| style="background-color:#64B2FF; color:#0B0080;" | #64B2FF
| 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:#E7E7FF; color:#0645AD;" | #E7E7FF
| style="background-color:#A4A4FF; color:#0B0080;" | #A4A4FF
| style="background-color:#A2A2FF;" | #A2A2FF
| style="background-color:#8888FF; color:#000;" | #8888FF
| style="background-color:#3030FF; color:#FFF;" | #3030FF
|-
! scope="row" | Electric indigo
| 270°
| #8000FF
| style="background-color:#8000FF" |
| style="background-color:#F2E4FF; color:#0645AD;" | #F2E4FF
| style="background-color:#CB96FF; color:#0B0080;" | #CB96FF
| 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:#FFDFFF; color:#0645AD;" | #FFDFFF
| style="background-color:#FF76FF; color:#0B0080;" | #FF76FF
| style="background-color:#FF73FF;" | #FF73FF
| style="background-color:#FF29FF; color:#000;" | #FF29FF
| style="background-color:#9F009F; color:#FFF;" | #9F009F
|-
! scope="row" | Deep pink
| 330°
| #FF0080
| style="background-color:#FF0080" |
| style="background-color:#FFE1F2; color:#0645AD;" | #FFE1F2
| style="background-color:#FF84C1; color:#0B0080;" | #FF84C1
| 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:#E9E9E9; color:#0645AD;" | #E9E9E9
| style="background-color:#ADADAD; color:#0B0080;" | #ADADAD
| style="background-color:#ABABAB;" | #ABABAB
| style="background-color:#959595; color:#000;" | #959595
| style="background-color:#595959; color:#FFF;" | #595959
|}

[[Category:Wikipedia Manual of Style (accessibility)|Colors]]

Wikipedia:Manual of Style/Accessibility/Colors - Revision history

Tachyony: Imported page