Wikipedia:Manual of Style/Accessibility/Colors

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 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
  1. ^ "WCAG 2.0 and Link Colors". WebAIM Blog. WebAIM. 22 July 2009.

© MMXXIII Rich X Search. We shall prevail. All rights reserved. Rich X Search