Wikipedia:Manual of Style/Accessibility/CSS colors for text on white
(Redirected from MOS:ONWHITE)
 | 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.