Help:Color
Sarna News
 | This help page is a how-to guide. It explains concepts or processes used by the BattleTechWiki community. It is not one of BattleTechWiki's policies or guidelines, and may reflect varying levels of consensus. |
 | Links should be clearly recognizable as clickable to readers. Avoid using colored links as it may hinder the reader's ability to distinguish links from regular text, particularly coloring links solely for aesthetic purposes. See the Manual of Style accessibility guideline sections on Contrast and Color. |
To use a colour in a template you can use the hex triplet (e.g. #CD7F32 is bronze) or HTML color name (e.g. red). For color tables and a color pallette, see MOS:COLORS.
Overriding font colour[edit]
To apply colour to text, use:
<span style="color:hex triplet or colour name">text</span>
Note that you cannot use the Commonwealth spelling, "colour", in HTML tags used in wikitext.
Examples:
<span style="color:red">red writing</span>shows as red writing<span style="color:#0f0">green writing</span>shows as green writing<span style="color:#0000FF">blue writing</span>shows as blue writing
Template font colour [edit]
{{Font color}}, or its redirect {{Font colour}}, can also be used.
{{Font colour|fontcolour|backgroundcolour|Your text here}}
| Markup | Renders as |
|---|---|
{{font color|red|This text is different}}
|
This text is different |
{{font color|red|yellow|This text is different}}
|
This text is different |
{{font color||yellow|This text is different}}
|
This text is different |
Colour generation guide[edit]
The method used for selecting the colors for various top-level pages,
The 3 colours are generated using the HSV colour space, then translated into RGB.
| Hue | Saturation 4% Brightness 100% main background |
Saturation 10% Brightness 100% 2nd header, accent colour |
Saturation 15% Brightness 95% main border header background |
Saturation 15% Brightness 75% header border only |
|---|---|---|---|---|
| Note: for layouts with no spacing between borders, use the darker border colour. | ||||
| 0° | #FFF5F5 | #FFE6E6 | #F2CECE | #BFA3A3 |
| 10° | #FFF7F5 | #FFEAE6 | #F2D4CE | #BFA7A3 |
| 20° | #FFF8F5 | #FFEEE6 | #F2DACE | #BFACA3 |
| 30° | #FFFAF5 | #FFF2E6 | #F2E0CE | #BFB1A3 |
| 40° | #FFFCF5 | #FFF7E6 | #F2E6CE | #BFB6A3 |
| 50° | #FFFDF5 | #FFFBE6 | #F2ECCE | #BFBAA3 |
| 60° | #FFFFF5 | #FFFFE6 | #F2F2CE | #BFBFA3 |
| 70° | #FDFFF5 | #FBFFE6 | #ECF2CE | #BABFA3 |
| 80° | #FCFFF5 | #F7FFE6 | #E6F2CE | #B6BFA3 |
| 90° | #FAFFF5 | #F2FFE6 | #E0F2CE | #B1BFA3 |
| 100° | #F8FFF5 | #EEFFE6 | #DAF2CE | #ACBFA3 |
| 110° | #F7FFF5 | #EAFFE6 | #D4F2CE | #A7BFA3 |
| 120° | #F5FFF5 | #E6FFE6 | #CEF2CE | #A3BFA3 |
| 130° | #F5FFF7 | #E6FFEA | #CEF2D4 | #A3BFA7 |
| 140° | #F5FFF8 | #E6FFEE | #CEF2DA | #A3BFAC |
| 150° | #F5FFFA | #E6FFF2 | #CEF2E0 | #A3BFB1 |
| 160° | #F5FFFC | #E6FFF7 | #CEF2E6 | #A3BFB6 |
| 170° | #F5FFFD | #E6FFFB | #CEF2EC | #A3BFBA |
| 180° | #F5FFFF | #E6FFFF | #CEF2F2 | #A3BFBF |
| 190° | #F5FDFF | #E6FBFF | #CEECF2 | #A3BABF |
| 200° | #F5FCFF | #E6F7FF | #CEE6F2 | #A3B6BF |
| 210° | #F5FAFF | #E6F2FF | #CEE0F2 | #A3B1BF |
| 220° | #F5F8FF | #E6EEFF | #CEDAF2 | #A3ACBF |
| 230° | #F5F7FF | #E6EAFF | #CED4F2 | #A3A7BF |
| 240° | #F5F5FF | #E6E6FF | #CECEF2 | #A3A3BF |
| 250° | #F7F5FF | #EAE6FF | #D4CEF2 | #A7A3BF |
| 260° | #F8F5FF | #EEE6FF | #DACEF2 | #ACA3BF |
| 270° | #FAF5FF | #F2E6FF | #E0CEF2 | #B1A3BF |
| 280° | #FCF5FF | #F7E6FF | #E6CEF2 | #B6A3BF |
| 290° | #FDF5FF | #FBE6FF | #ECCEF2 | #BAA3BF |
| 300° | #FFF5FF | #FFE6FF | #F2CEF2 | #BFA3BF |
| 310° | #FFF5FD | #FFE6FB | #F2CEEC | #BFA3BA |
| 320° | #FFF5FC | #FFE6F7 | #F2CEE6 | #BFA3B6 |
| 330° | #FFF5FA | #FFE6F2 | #F2CEE0 | #BFA3B1 |
| 340° | #FFF5F8 | #FFE6EE | #F2CEDA | #BFA3AC |
| 350° | #FFF5F7 | #FFE6EA | #F2CED4 | #BFA3A7 |
| S: 0% | #FFFFFF | #F9F9F9 | #F2F2F2 | #BFBFBF |
Accessibility[edit]
It is best to choose background colors that offer sufficient contrast in relation to text and blue links, which is also the color of references, both of which are very common in most articles. Use the 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 skin).[1]
| Base color | Darkest backgrounds for dark text | Lightest background for white text | |||||
|---|---|---|---|---|---|---|---|
| Name | Hue | Hex | Color | Text and links (WCAG AA) |
Text only | Pure black text (not default) | |
| Red | 0° | #FF0000 | #FFE6E6 | #FF8888 | #FF6060 | #B60000 | |
| Orange | 30° | #FF8000 | #FFE8D0 | #FF8E1C | #E97500 | #8C4600 | |
| Yellow | 60° | #FFFF00 | #F3F300 | #B1B100 | #9B9B00 | #5C5C00 | |
| Chartreuse | 90° | #80FF00 | #B9FF72 | #61C100 | #54A900 | #326500 | |
| Green | 120° | #00FF00 | #ABFFAB | #00C700 | #00AE00 | #006800 | |
| Spring green | 150° | #00FF80 | #9DFFCE | #00C563 | #00AC56 | #006733 | |
| Cyan | 180° | #00FFFF | #7DFFFF | #00BFBF | #00A6A6 | #006363 | |
| Azure | 210° | #0080FF | #DCEEFF | #60B0FF | #3098FF | #0057AF | |
| Blue | 240° | #0000FF | #EAEAFF | #A2A2FF | #8888FF | #3030FF | |
| Violet | 270° | #8000FF | #F3E7FF | #C994FF | #B974FF | #7600EC | |
| Magenta | 300° | #FF00FF | #FFE3FF | #FF73FF | #FF29FF | #9F009F | |
| Rose | 330° | #FF0080 | #FFE4F1 | #FF81C0 | #FF52A8 | #B00058 | |
| Grey | — | 808080 | #EBEBEB | #ABABAB | #959595 | #595959 | |
Schemes for colour-blind readers[edit]
Approximately 1 in 12 men and 1 in 200 women with Northern European ancestry have red-green colour blindness; this and other types affect people worldwide.[2] 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.
| Colour 1 | Colour 2 | Colour 3 | Colour 4 | Colour 5 | Colour 6 |
|---|---|---|---|---|---|
| White | Yellow | Blue | Red | Black | Grey |
| Green | |||||
| Lime | Purple | Brown | Cyan | ||
| Orange | Pink |
- Pick a maximum of one colour from each column. Do not use more than one colour from any one column.
- Use large expanses of the colour. If you're colouring text, use bold and a large font.
- For small expanses of colour, such as thin lines, clearly label them with text, or use non-colour techniques such as font styles (bold or italic), line styles (dots and dashes) or cross-hatching (stripes, checkers or polka-dots).
- Use bright mid-range colours, like children's crayons. Do not use light or dark variants of the colours.
- If you need more colours... hard luck. Instead use non-colour techniques such as labelling, font styles (bold or italic), line styles (dots and dashes) or cross-hatching (stripes, checkers or polka-dots).
- If you are colour-blind yourself, check your revised image with a colour-sighted person to confirm the meaning is intact.
The following utilities may be of use in determining whether a revised image is distinguishable to colour-blind users. Typically they take a web page or image file as an input, and render a colour-blind simulated image as output:
- Mozilla Firefox color-blind addons
- Sim Daltonism simulates color blind vision and displays the results in a floating palette for macOS and iOS. Freeware.
- Color Oracle downloadable, free color blindness simulator for Windows, Mac and Linux. Freeware.
See also[edit]
Templates[edit]
- To colour text and background:
- To provide example squares of colour:
Related MOS pages[edit]
- BattleTechWiki:Manual of Style/Accessibility § Color
- BattleTechWiki:Manual of Style/Text formatting § Color
- BattleTechWiki:Manual of Style/Accessibility/Colors
Wikipedia articles[edit]
References[edit]
- ↑ "WCAG 2.0 and Link Colors". WebAIM Blog. WebAIM. 22 July 2009.
- ↑ "Color Vision Deficiency". MedlinePlus. U.S. National Library of Medicine. 1 January 2015. Retrieved 29 January 2021.