This help page is ahow-to guide. It explains concepts or processes usedWikipedia:Manual of Style/Accessibility It is not one ofWikipedia's policies or guidelines, and may reflect varying levels ofconsensus. |
These color tables should help editors choose accessible backgrounds matching various color schemes. The first table containsWCAG AAA compatible for 14 differenthues, 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 itslightness inHSL to achieve the necessary WCAGcontrast ratio, which is defined as a ratio of slightly modified CIErelative luminance values.
It is best to choose background colors that offer sufficient contrast in relation to text andblue links, which is also the color of references, both of which are very common in most articles. Use theWCAG 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).[1] 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.
| Base color | Darkest backgrounds for dark text | Lightest background for white text | |||||
|---|---|---|---|---|---|---|---|
| Name | Hue | Hex | Color | Text andlinks (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 | |
The followingweb colors are supported by all major browsers since 2005.
WCAG AA with text and blue links:
WCAG AAA with white text
WCAG AA with white text
Many of theseweb colors are used as background colors fortable 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 intensecolorfulness in specific cases.
| FEF | FFE | EFD | EFE | DFE | EFF | ||
| FFD | CFE | DFF | |||||
| FFC | EFC | DFC | DFD | BFE | CFF | ||
| FFB | EFB | DFB | CFB | CFC | CFD | BFF | |
| FFA | EFA | DFA | CFA | BFD | AFF | ||
| FEE | FF9 | EF9 | DF9 | CF9 | BFB | BFC | 9FF |
| FED | FF8 | EF8 | DF8 | CF8 | AFC | ||
| FEC | FF7 | EF7 | DF7 | CF7 | |||
| FEB | FF6 | EF6 | DF6 | CF6 | |||
| FEA | FF5 | EF5 | DF5 | CF5 | |||
| FE9 | FF4 | EF4 | DF4 | CF4 | |||
| FE8 | FF3 | EF3 | DF3 | CF3 | BFA | AFD | |
| FE7 | FF2 | EF2 | DF2 | CF2 | BF9 | AFE | |
| FE6 | FF1 | EF1 | DF1 | CF1 | BF8 | 9FE | |
| FE5 | FF0 | EF0 | DF0 | CF0 | BF7 | 9FD | 8FF |
| EEC | EED | EEE | EEF | DEF | |||
Thepastel 2Brewer qualitative palette can be slightly lightened (inHSL color space) to become WCAG AAA compatible with unvisited links, resulting in the following colors:
To use this palette easily, see{{CellCategory}} and{{CategoryBgColor}}.