Wikipedia:Manual of Style/Accessibility/Colors
 | This help page is a how-to guide. It details processes or procedures of Wikipedia:Manual of Style/Accessibility. It is not one of Wikipedia's policies or guidelines, and may reflect varying levels of consensus and vetting. |
This table of colours are WCAG AAA compatible for 14 different hues – 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 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 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.
| Base colour | Darkest AAA background | Lightest AAA background | ||||||
|---|---|---|---|---|---|---|---|---|
| Name | Hue | Hex | Colour | Unvisited links | Visited links | Normal text | Pure black text | White text |
| Red | 0° | #FF0000 | #FFE3E3 | #FF8B8B | #FF8888 | #FF6060 | #B60000 | |
| Orange or brown | 30° | #FF8000 | #FFE5CC | #FF9123 | #FF8E1C | #E97500 | #8C4600 | |
| Yellow | 60° | #FFFF00 | #F1F100 | #B3B300 | #B1B100 | #9B9B00 | #5C5C00 | |
| Chartreuse | 90° | #80FF00 | #AEFF5C | #61C300 | #61C100 | #54A900 | #326500 | |
| Green | 120° | #00FF00 | #9EFF9E | #00C900 | #00C700 | #00AE00 | #006800 | |
| Spring green | 150° | #00FF80 | #8DFFC6 | #00C763 | #00C563 | #00AC56 | #006733 | |
| Cyan | 180° | #00FFFF | #60FFFF | #00C0C0 | #00BFBF | #00A6A6 | #006363 | |
| Dodger blue | 210° | #0080FF | #D4ECFF | #64B2FF | #60B0FF | #3098FF | #0057AF | |
| Blue | 240° | #0000FF | #E7E7FF | #A4A4FF | #A2A2FF | #8888FF | #3030FF | |
| Electric indigo | 270° | #8000FF | #F2E4FF | #CB96FF | #C994FF | #B974FF | #7600EC | |
| Magenta | 300° | #FF00FF | #FFDFFF | #FF76FF | #FF73FF | #FF29FF | #9F009F | |
| Deep pink | 330° | #FF0080 | #FFE1F2 | #FF84C1 | #FF81C0 | #FF52A8 | #B00058 | |
| Grey | — | #808080 | #E9E9E9 | #ADADAD | #ABABAB | #959595 | #595959 | |