These color tables should help editors choose accessible backgrounds matching various color schemes. The first table contains WCAG AAA compatible for 14 different 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 lightness in HSL to achieve the necessary WCAG contrast ratio, which is defined as a ratio of slightly modified CIE relative luminance values.

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 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.

Compatible WCAG AAA background colors against text and links
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

Web colors[edit]

Named web colors

The following web colors are supported by all major browsers since 2005:

WCAG AA with text and blue links
White
Ivory
MintCream
Azure
Snow
Honeydew
FloralWhite
GhostWhite
AliceBlue
Seashell
OldLace
WhiteSmoke
LavenderBlush
Beige
Linen
AntiqueWhite
LightYellow
LemonChiffon
LightGoldenrodYellow
PapayaWhip
Cornsilk
BlanchedAlmond
LightCyan
Yellow

Shorthand web colors

Many of these web colors are used as background colors for table cell templates, particularly in the yellow-green-cyan hue range. For the blue-magenta-red range, more specific colors were chosen to achieve slightly more intense colorfulness in specific cases.

WCAG AAA with unvisited links
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

Categorical palettes[edit]

The pastel 2 Brewer qualitative palette can be slightly lightened (in HSL color space) to become WCAG AAA compatible with unvisited links, resulting in the following colors:

Brewer's pastel 2 approximation
D9F1E6
FEE7D6
E7ECF4
FAE6F2
E6F5C9
FFF2AE
F5EAD9
EBEBEB

To use this palette easily, see ((CellCategory)) and ((CategoryBgColor)).

See also[edit]

References[edit]

  1. ^ "WCAG 2.0 and Link Colors". WebAIM Blog. WebAIM. 22 July 2009.
Categories