View source for BattleTechWiki:Manual of Style/Accessibility/Colors

You do not have permission to edit this page, for the following reason:

---

You can view and copy the source of this page.

{{redirect|MOS:COLORS|the MOS guideline|MOS:COLOR}} {{BattleTechWiki how-to|interprets=BattleTechWiki:Manual of Style/Accessibility|sc1=MOS:COLORS}} These color tables should help editors choose accessible backgrounds matching various color schemes. The first table contains [[w:WCAG|WCAG]] AAA compatible for 14 different [[w:HSL and HSV|hues]], plus grey and brown. In each row, the "base color" is the simplest representation of the hue. The other colors are derived from the base color by varying its [[w:lightness|lightness]] in [[w:HSL and HSV|HSL]] to achieve the necessary WCAG [[w:contrast ratio|contrast ratio]], which is defined as a ratio of slightly modified CIE [[w:relative luminance|relative luminance]] values. 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> WCAG AA is required by various government bodies in the US, EU, UK and Canada. When links and references are not present, extra contrast is possible by setting the text color to pure black (#000000). If a dark background is desired, it should be used against white text (#FFFFFF) without links or references. {| 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" | [[w:HSL and HSV|Hue]] ! scope="col" | [[w: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 |} == Web colors == === Named web colors === The following [[w:web colors|web colors]] are supported by all major browsers since 2005. WCAG AA with text and blue links: {{plainlist}} <ul style="display: flex; text-align: center; flex-wrap: wrap; gap: 3px"> <li style="background:white; color:#3366CC; width:11em;">White</li> <li style="background:ivory; color:#36c; width:11em;">Ivory</li> <li style="background:mintcream; color:#36c; width:11em;">MintCream</li> <li style="background:azure; color:#36c; width:11em;">Azure</li> <li style="background:snow; color:#36c; width:11em;">Snow</li> <li style="background:honeydew; color:#36c; width:11em;">Honeydew</li> <li style="background:floralwhite; color:#36c; width:11em;">FloralWhite</li> <li style="background:ghostwhite; color:#36c; width:11em;">GhostWhite</li> <li style="background:aliceblue; color:#36c; width:11em;">AliceBlue</li> <li style="background:seashell; color:#36c; width:11em;">Seashell</li> <li style="background:oldlace; color:#36c; width:11em;">OldLace</li> <li style="background:whitesmoke; color:#36c; width:11em;">WhiteSmoke</li> <li style="background:lavenderblush; color:#36c; width:11em;">LavenderBlush</li> <li style="background:beige; color:#36c; width:11em;">Beige</li> <li style="background:linen; color:#36c; width:11em;">Linen</li> <li style="background:antiquewhite; color:#36c; width:11em;">AntiqueWhite</li> <li style="background:lightyellow; color:#36c; width:11em;">LightYellow</li> <li style="background:lemonchiffon; color:#36c; width:11em;">LemonChiffon</li> <li style="background:lightgoldenrodyellow; color:#36c; width:11em;">LightGoldenrodYellow</li> <li style="background:papayawhip; color:#36c; width:11em;">PapayaWhip</li> <li style="background:cornsilk; color:#36c; width:11em;">Cornsilk</li> <li style="background:blanchedalmond; color:#36c; width:11em;">BlanchedAlmond</li> <li style="background:lightcyan; color:#36c; width:11em;">LightCyan</li> <li style="background:yellow; color:#36c; width:11em;">Yellow</li> </ul> {{endplainlist}} WCAG AAA with white text {{plainlist}} <ul style="display: flex; text-align: center; flex-wrap: wrap; gap: 3px"> <li style="background:black; color:white; width:11em;">Black</li> <li style="background:darkslategray; color:white; width:11em;">DarkSlateGray</li> <li style="background:navy; color:white; width:11em;">Navy</li> <li style="background:darkblue; color:white; width:11em;">DarkBlue</li> <li style="background:midnightblue; color:white; width:11em;">MidnightBlue</li> <li style="background:mediumblue; color:white; width:11em;">MediumBlue</li> <li style="background:blue; color:white; width:11em;">Blue</li> <li style="background:indigo; color:white; width:11em;">Indigo</li> <li style="background:purple; color:white; width:11em;">Purple</li> <li style="background:darkslateblue; color:white; width:11em;">DarkSlateBlue</li> <li style="background:darkmagenta; color:white; width:11em;">DarkMagenta</li> <li style="background:darkred; color:white; width:11em;">DarkRed</li> <li style="background:maroon; color:white; width:11em;">Maroon</li> <li style="background:saddlebrown; color:white; width:11em;">SaddleBrown</li> <li style="background:brown; color:white; width:11em;">Brown</li> <li style="background:darkgreen; color:white; width:11em;">DarkGreen</li> </ul> {{endplainlist}} WCAG AA with white text {{plainlist}} <ul style="display: flex; text-align: center; flex-wrap: wrap; gap: 3px"> <li style="background:dimgray; color:white; width:11em;">DimGray</li> <li style="background:mediumvioletred; color:white; width:11em;">MediumVioletRed</li> <li style="background:firebrick; color:white; width:11em;">Firebrick</li> <li style="background:crimson; color:white; width:11em;">Crimson</li> <li style="background:darkolivegreen; color:white; width:11em;">DarkOliveGreen</li> <li style="background:green; color:white; width:11em;">Green</li> <li style="background:teal; color:white; width:11em;">Teal</li> </ul> {{endplainlist}} === Shorthand web colors === Many of these [[w:web colors|web colors]] are used as background colors for [[Template:Table cell templates|table cell templates]], particularly in the yellow-green-cyan hue range. For the blue-magenta-red range, some of these templates use slightly darker colors to achieve slightly more intense [[w:colorfulness|colorfulness]] in specific cases. {| class="wikitable" style="text-align:center;" |+ WCAG AAA with unvisited links |- | style="background:#FEF; color:#3366CC;" rowspan="5" | {{Tooltip|FEF|Pale purple}} | style="background:#FFE; color:#3366CC;" | {{Tooltip|FFE|Ivory}} | style="background:#EFD; color:#3366CC;" colspan="2" rowspan="2" | EFD | style="background:#EFE; color:#3366CC;" colspan="2" rowspan="2" | {{Tooltip|EFE|Honeydew}} | style="background:#DFE; color:#3366CC;" | DFE | style="background:#EFF; color:#3366CC;" | {{Tooltip|EFF|Azure}} |- | style="background:#FFD; color:#3366CC;" | {{Tooltip|FFD|Light yellow}} | style="background:#CFE; color:#3366CC;" | CFE | style="background:#DFF; color:#3366CC;" | {{Tooltip|DFF|Light cyan}} |- | style="background:#FFC; color:#3366CC;" | {{Tooltip|FFC|Cream}} | style="background:#EFC; color:#3366CC;" colspan="2" | EFC | style="background:#DFC; color:#3366CC;" | DFC | style="background:#DFD; color:#3366CC;" | DFD | style="background:#BFE; color:#3366CC;" | BFE | style="background:#CFF; color:#3366CC;" | CFF |- | style="background:#FFB; color:#3366CC;" | FFB | style="background:#EFB; color:#3366CC;" | EFB | style="background:#DFB; color:#3366CC;" | DFB | style="background:#CFB; color:#3366CC;" | {{Tooltip|CFB|Tea green}} | style="background:#CFC; color:#3366CC;" rowspan="2" | CFC | style="background:#CFD; color:#3366CC;" | CFD | style="background:#BFF; color:#3366CC;" | BFF |- | style="background:#FFA; color:#3366CC;" | FFA | style="background:#EFA; color:#3366CC;" | EFA | style="background:#DFA; color:#3366CC;" | DFA | style="background:#CFA; color:#3366CC;" | CFA | style="background:#BFD; color:#3366CC;" | BFD | style="background:#AFF; color:#3366CC;" | {{Tooltip|AFF|Celeste}} |- | style="background:#FEE; color:#3366CC;" | {{Tooltip|FEE|Seashell}} | style="background:#FF9; color:#3366CC;" | {{Tooltip|FF9|Canary}} | style="background:#EF9; color:#3366CC;" | EF9 | style="background:#DF9; color:#3366CC;" | DF9 | style="background:#CF9; color:#3366CC;" | CF9 | style="background:#BFB; color:#3366CC;" rowspan="6" | {{Tooltip|BFB|Pale green}} | style="background:#BFC; color:#3366CC;" | BFC | style="background:#9FF; color:#3366CC;" rowspan="9" | 9FF |- | style="background:#FED; color:#3366CC;" | {{Tooltip|FED|Papaya whip}} | style="background:#FF8; color:#3366CC;" | {{Tooltip|FF8|Pastel yellow}} | style="background:#EF8; color:#3366CC;" | EF8 | style="background:#DF8; color:#3366CC;" | DF8 | style="background:#CF8; color:#3366CC;" | CF8 | style="background:#AFC; color:#3366CC;" rowspan="5" | AFC |- | style="background:#FEC; color:#3366CC;" | {{Tooltip|FEC|Blanched almond}} | style="background:#FF7; color:#3366CC;" | FF7 | style="background:#EF7; color:#3366CC;" | EF7 | style="background:#DF7; color:#3366CC;" | DF7 | style="background:#CF7; color:#3366CC;" | CF7 |- | style="background:#FEB; color:#3366CC;" | FEB | style="background:#FF6; color:#3366CC;" | {{Tooltip|FF6|Laser lemon}} | style="background:#EF6; color:#3366CC;" | EF6 | style="background:#DF6; color:#3366CC;" | DF6 | style="background:#CF6; color:#3366CC;" | CF6 |- | style="background:#FEA; color:#3366CC;" | {{Tooltip|FEA|Peach}} | style="background:#FF5; color:#3366CC;" | FF5 | style="background:#EF5; color:#3366CC;" | EF5 | style="background:#DF5; color:#3366CC;" | DF5 | style="background:#CF5; color:#3366CC;" | CF5 |- | style="background:#FE9; color:#3366CC;" | {{Tooltip|FE9|Light goldenrod}} | style="background:#FF4; color:#3366CC;" | {{Tooltip|FF4|Maximum yellow}} | style="background:#EF4; color:#3366CC;" | EF4 | style="background:#DF4; color:#3366CC;" | DF4 | style="background:#CF4; color:#3366CC;" | CF4 |- | style="background:#FE8; color:#3366CC;" | FE8 | style="background:#FF3; color:#3366CC;" | FF3 | style="background:#EF3; color:#3366CC;" | {{Tooltip|EF3|Luis lemon}} | style="background:#DF3; color:#3366CC;" | DF3 | style="background:#CF3; color:#3366CC;" | CF3 | style="background:#BFA; color:#3366CC;" | BFA | style="background:#AFD; color:#3366CC;" | AFD |- | style="background:#FE7; color:#3366CC;" | FE7 | style="background:#FF2; color:#3366CC;" | FF2 | style="background:#EF2; color:#3366CC;" | EF2 | style="background:#DF2; color:#3366CC;" | DF2 | style="background:#CF2; color:#3366CC;" | CF2 | style="background:#BF9; color:#3366CC;" | BF9 | style="background:#AFE; color:#3366CC;" | AFE |- | style="background:#FE6; color:#3366CC;" | {{Tooltip|FE6|Maize}} | style="background:#FF1; color:#3366CC;" | FF1 | style="background:#EF1; color:#3366CC;" | EF1 | style="background:#DF1; color:#3366CC;" | DF1 | style="background:#CF1; color:#3366CC;" | {{Tooltip|CF1|Arctic lime}} | style="background:#BF8; color:#3366CC;" | BF8 | style="background:#9FE; color:#3366CC;" | 9FE |- | style="background:#FE5; color:#3366CC;" | {{Tooltip|FE5|Lemon yellow}} | style="background:#FF0; color:#3366CC;" | {{Tooltip|FF0|Yellow}} | style="background:#EF0; color:#3366CC;" | EF0 | style="background:#DF0; color:#3366CC;" | {{Tooltip|DF0|Chartreuse}} | style="background:#CF0; color:#3366CC;" | {{Tooltip|CF0|Electric lime}} | style="background:#BF7; color:#3366CC;" | BF7 | style="background:#9FD; color:#3366CC;" | {{Tooltip|9FD|Aquamarine}} | style="background:#8FF; color:#3366CC;" | {{Tooltip|8FF|Electric blue}} |- | style="background:#EEC; color:#3366CC;" | {{Tooltip|EEC|Eggshell}} | style="background:#EED; color:#3366CC;" | {{Tooltip|EED|Beige}} | style="background:#EEE; color:#3366CC;" colspan="4" | {{Tooltip|EEE|White smoke}} | style="background:#EEF; color:#3366CC;" | {{Tooltip|EEF|Alice blue}} | style="background:#DEF; color:#3366CC;" | DEF |} == Categorical palettes == The ''pastel 2'' [[w:Brewer palettes|Brewer qualitative palette]] can be slightly lightened (in [[w:HSL and HSV|HSL color space]]) to become WCAG AAA compatible with unvisited links, resulting in the following colors: {{plainlist}} <ul style="display: flex; text-align: center; flex-wrap: wrap; gap: 3px"> <li style="background:#D9F1E6; color:#36c; width:6em;">D9F1E6</li> <li style="background:#FEE7D6; color:#36c; width:6em;">FEE7D6</li> <li style="background:#E7ECF4; color:#36c; width:6em;">E7ECF4</li> <li style="background:#FAE6F2; color:#36c; width:6em;">FAE6F2</li> <li style="background:#E6F5C9; color:#36c; width:6em;">E6F5C9</li> <li style="background:#FFF2AE; color:#36c; width:6em;">FFF2AE</li> <li style="background:#F5EAD9; color:#36c; width:6em;">F5EAD9</li> <li style="background:#EBEBEB; color:#36c; width:6em;">EBEBEB</li> </ul> {{endplainlist}} To use this palette easily, see {{tl|CellCategory}} and {{tl|CategoryBgColor}}. ==See also== * [[Help:Using colours]] * [[w:Lists of colors|Lists of colors]] * [[w:Web colors|Web colors]] ==References== {{reflist}} [[Category:Manual of Style|Colors]]

Templates used on this page:

• Template:BattleTechWiki how-to (edit)
• Template:Cite web (edit)
• Template:Endplainlist (edit)
• Template:Main other (edit)
• Template:Namespace detect (edit)
• Template:No redirect (edit)
• Template:Ombox (view source) (protected)
• Template:Plainlist (edit)
• Template:Plainlist/styles.css (view source) (protected)
• Template:Redirect (edit)
• Template:Reflist (edit)
• Template:Reflist/styles.css (edit)
• Template:Shortcut (edit)
• Template:Template link (edit)
• Template:Tl (edit)
• Template:Tooltip (edit)
• Template:Tooltip/styles.css (edit)
• Template:Yesno (view source) (protected)
• Template:Yesno-no (edit)
• Template:Yesno-yes (edit)
• Module:Arguments (view source) (protected)
• Module:Check for unknown parameters (edit)
• Module:Citation/CS1 (edit)
• Module:Citation/CS1/COinS (edit)
• Module:Citation/CS1/Configuration (edit)
• Module:Citation/CS1/Date validation (edit)
• Module:Citation/CS1/Identifiers (edit)
• Module:Citation/CS1/Utilities (edit)
• Module:Citation/CS1/Whitelist (edit)
• Module:Citation/CS1/styles.css (edit)
• Module:Format link (edit)
• Module:Hatnote (edit)
• Module:Hatnote/styles.css (edit)
• Module:Hatnote list (edit)
• Module:List (view source) (protected)
• Module:Message box (view source) (protected)
• Module:Message box/configuration (view source) (protected)
• Module:Message box/ombox.css (edit)
• Module:Namespace detect (view source) (protected)
• Module:Namespace detect/config (view source) (protected)
• Module:Namespace detect/data (view source) (protected)
• Module:Redirect (edit)
• Module:Redirect hatnote (edit)
• Module:Shortcut (edit)
• Module:Shortcut/config (edit)
• Module:Shortcut/styles.css (edit)
• Module:String (view source) (protected)
• Module:TableTools (view source) (protected)
• Module:Yesno (view source) (protected)

Return to BattleTechWiki:Manual of Style/Accessibility/Colors.