Wikipedia:Manual of Style/Accessibility/CSS colors for text on white
Appearance
This help page is a how-to guide. It explains concepts or processes used Wikipedia:Manual of Style/Accessibility It is not one of Wikipedia's policies or guidelines, and may reflect varying levels of consensus. |
Recommended
[edit]For text against a white background, the following CSS colors meet the minimum contrast ratio (4.5:1) specified by Web Content Accessibility Guidelines (WCAG) 2.0 Level AA.
Contrast[a] | Color sample | Color name (bolded) | Hex | AAA[b] |
---|---|---|---|---|
21 | Black | #000000 | Yes | |
16.009 | Navy | #000080 | Yes | |
15.297 | DarkBlue | #00008B | Yes | |
14.847 | MidnightBlue | #191970 | Yes | |
12.95 | Indigo | #4B0082 | Yes | |
11.16 | MediumBlue | #0000CD | Yes | |
10.949 | Maroon | #800000 | Yes | |
10.01 | DarkRed | #8B0000 | Yes | |
9.418 | Purple | #800080 | Yes | |
9.067 | DarkSlateBlue | #483D8B | Yes | |
8.927 | DarkSlateGray | #2F4F4F | Yes | |
8.927 | DarkSlateGrey | #2F4F4F | Yes | |
8.592 | Blue | #0000FF | Yes | |
8.528 | (none) [c] | #0645AD | Yes | |
8.499 | DarkMagenta | #8B008B | Yes | |
8.405 | RebeccaPurple | #663399 | Yes | |
7.439 | DarkGreen | #006400 | Yes | |
7.098 | SaddleBrown | #8B4513 | Yes | |
7.083 | Brown | #A52A2A | Yes | |
6.677 | FireBrick | #B22222 | No | |
6.562 | DarkViolet | #9400D3 | No | |
5.958 | BlueViolet | #8A2BE2 | No | |
5.948 | DarkOliveGreen | #556B2F | No | |
5.702 | DarkOrchid | #9932CC | No | |
5.615 | Sienna | #A0522D | No | |
5.489 | DimGray | #696969 | No | |
5.489 | DimGrey | #696969 | No | |
5.42 | MediumVioletRed | #C71585 | No | |
5.307 | SlateBlue | #6A5ACD | No | |
5.137 | Green | #008000 | No | |
4.989 | Crimson | #DC143C | No | |
4.846 | RoyalBlue | #4169E1 | No | |
4.773 | Teal | #008080 | No |
Not recommended
[edit]For text against a white background, the following CSS colors do not meet the minimum contrast ratio (4.5:1) specified by Web Content Accessibility Guidelines (WCAG) 2.0 Level AA.
Contrast[d] | Color sample | Color name | Hex |
---|---|---|---|
4.389 | ForestGreen | #228B22 | |
4.245 | SeaGreen | #2E8B57 | |
4.195 | Olive | #808000 | |
4.152 | MediumSlateBlue | #7B68EE | |
4.145 | DarkCyan | #008B8B | |
4.107 | SteelBlue | #4682B4 | |
4.054 | SlateGray | #708090 | |
4.054 | SlateGrey | #708090 | |
3.998 | Red | #FF0000 | |
3.976 | IndianRed | #CD5C5C | |
3.949 | Gray | #808080 | |
3.949 | Grey | #808080 | |
3.941 | MediumOrchid | #BA55D3 | |
3.805 | OliveDrab | #6B8E23 | |
3.762 | MediumPurple | #9370DB | |
3.642 | LightSlateGray | #778899 | |
3.642 | LightSlateGrey | #778899 | |
3.637 | DeepPink | #FF1493 | |
3.633 | Chocolate | #D2691E | |
3.44 | OrangeRed | #FF4500 | |
3.254 | DarkGoldenrod | #B8860B | |
3.236 | DodgerBlue | #1E90FF | |
3.136 | Fuchsia | #FF00FF | |
3.136 | Magenta | #FF00FF | |
3.11 | PaleVioletRed | #DB7093 | |
3.05 | CadetBlue | #5F9EA0 | |
2.99 | Peru | #CD853F | |
2.972 | CornflowerBlue | #6495ED | |
2.946 | Tomato | #FF6347 | |
2.888 | Orchid | #DA70D6 | |
2.813 | RosyBrown | #BC8F8F | |
2.665 | MediumSeaGreen | #3CB371 | |
2.647 | HotPink | #FF69B4 | |
2.621 | LightSeaGreen | #20B2AA | |
2.591 | LightCoral | #F08080 | |
2.501 | Salmon | #FA8072 | |
2.498 | Coral | #FF7F50 | |
2.35 | DarkGray | #A9A9A9 | |
2.35 | DarkGrey | #A9A9A9 | |
2.332 | DarkOrange | #FF8C00 | |
2.317 | Violet | #EE82EE | |
2.305 | DarkSalmon | #E9967A | |
2.237 | Goldenrod | #DAA520 | |
2.152 | DarkSeaGreen | #8FBC8F | |
2.122 | DeepSkyBlue | #00BFFF | |
2.118 | LimeGreen | #32CD32 | |
2.069 | DarkKhaki | #BDB76B | |
2.069 | Plum | #DDA0DD | |
2.033 | SandyBrown | #F4A460 | |
1.988 | LightSalmon | #FFA07A | |
1.974 | Orange | #FFA500 | |
1.972 | Tan | #D2B48C | |
1.953 | DarkTurquoise | #00CED1 | |
1.93 | MediumAquamarine | #66CDAA | |
1.882 | YellowGreen | #9ACD32 | |
1.863 | MediumTurquoise | #48D1CC | |
1.856 | BurlyWood | #DEB887 | |
1.819 | Silver | #C0C0C0 | |
1.78 | LightSteelBlue | #B0C4DE | |
1.741 | SkyBlue | #87CEEB | |
1.715 | LightSkyBlue | #87CEFA | |
1.698 | Thistle | #D8BFD8 | |
1.651 | LightPink | #FFB6C1 | |
1.641 | Turquoise | #40E0D0 | |
1.537 | Pink | #FFC0CB | |
1.528 | LightBlue | #ADD8E6 | |
1.496 | LightGray | #D3D3D3 | |
1.496 | LightGrey | #D3D3D3 | |
1.433 | PowderBlue | #B0E0E6 | |
1.417 | LightGreen | #90EE90 | |
1.402 | Gold | #FFD700 | |
1.386 | MediumSpringGreen | #00FA9A | |
1.372 | Lime | #00FF00 | |
1.371 | Gainsboro | #DCDCDC | |
1.345 | SpringGreen | #00FF7F | |
1.33 | LawnGreen | #7CFC00 | |
1.314 | PeachPuff | #FFDAB9 | |
1.313 | Wheat | #F5DEB3 | |
1.295 | Chartreuse | #7FFF00 | |
1.289 | PaleTurquoise | #AFEEEE | |
1.288 | NavajoWhite | #FFDEAD | |
1.28 | Khaki | #F0E68C | |
1.266 | PaleGreen | #98FB98 | |
1.253 | Aqua | #00FFFF | |
1.253 | Cyan | #00FFFF | |
1.253 | PaleGoldenrod | #EEE8AA | |
1.234 | Moccasin | #FFE4B5 | |
1.23 | Lavender | #E6E6FA | |
1.226 | GreenYellow | #ADFF2F | |
1.224 | Bisque | #FFE4C4 | |
1.223 | Aquamarine | #7FFFD4 | |
1.204 | MistyRose | #FFE4E1 | |
1.171 | AntiqueWhite | #FAEBD7 | |
1.165 | BlanchedAlmond | #FFEBCD | |
1.131 | PapayaWhip | #FFEFD5 | |
1.124 | Linen | #FAF0E6 | |
1.106 | Beige | #F5F5DC | |
1.103 | LavenderBlush | #FFF0F5 | |
1.09 | WhiteSmoke | #F5F5F5 | |
1.083 | OldLace | #FDF5E6 | |
1.074 | SeaShell | #FFF5EE | |
1.073 | Yellow | #FFFF00 | |
1.072 | AliceBlue | #F0F8FF | |
1.067 | LightGoldenrodYellow | #FAFAD2 | |
1.065 | Cornsilk | #FFF8DC | |
1.06 | LemonChiffon | #FFFACD | |
1.057 | GhostWhite | #F8F8FF | |
1.054 | LightCyan | #E0FFFF | |
1.04 | FloralWhite | #FFFAF0 | |
1.036 | Honeydew | #F0FFF0 | |
1.034 | Snow | #FFFAFA | |
1.026 | Azure | #F0FFFF | |
1.021 | MintCream | #F5FFFA | |
1.017 | LightYellow | #FFFFE0 | |
1.008 | Ivory | #FFFFF0 | |
1 | White | #FFFFFF |
Notes
[edit]- ^ Contrast against white, from Snook's Colour Contrast Check. Omits the :1 for simplicity (and numerical sortability), so n represents n:1.
- ^ Indicates whether the color meets the minimum contrast ratio (7:1) specified by WCAG 2.0 Level AAA.
- ^ Default unvisited-link color for Wikipedia's Vector skin, as of May 2019. Sources: Help:Link color and [1]
- ^ Contrast against white, from Snook's Colour Contrast Check. Omits the :1 for simplicity (and numerical sortability), so n represents n:1.