Help:Color/Accessibility
Sarna News
This table of colours are WCAG AAA compatible for 14 different hues – the 12 colours at 30° intervals, plus grey and brown. In each row, the "base colour" is the simplest representation of the hue. This will help editors to select accessible backgrounds that match a wide range of colour schemes.
In most articles, it is common to have text with references that use the same blue link color used for links to other articles. Therefore, it is best to choose colors that offer sufficient contrast, at least in relation to text and unvisited links.
The "darkest AAA background for normal text" column is the darkest shade of that hue which meets the full WCAG AAA standard for (i) Brightness Difference, (ii) Colour Difference, (iii) Contrast Ratio, as measured by WebAIM contrast checker when used with the colour of normal text (#202122, contrast checker). Any lighter shade of that hue (i.e. larger hexadecimal numbers in the #RRGGBB representation) will exceed AAA standards. When links and references are not present, extra contrast is possible by setting the text color to pure black (#000000).
The same applies to the "darkest AAA background for unvisited links" column when used with the default linked text for Vector skin (#0645AD, contrast checker), although the "darkest AAA background for visited links" column also needs to be consulted because the default colour for visited linked text using Vector skin is #0B0080.
If a dark background is desired, then it should ideally be presented against white text. The column "lightest AAA background for white text" shows the lightest that the background can be for each hue to maintain AAA compliance against white text (contrast checker). Any darker shade of that hue (i.e. smaller hexadecimal numbers in the #RRGGBB representation) will exceed AAA standards. Links are not suited to be used with their default colours on a dark background.
| Base colour | Darkest background for unvisited links | Darkest WCAG AAA background | Lightest WCAG AAA background | ||||||
|---|---|---|---|---|---|---|---|---|---|
| Name | Hue | Hex | Colour | WCAG AAA | WCAG AA | Visited links | Normal text | Pure black text | White text |
| Red | 0° | #FF0000 | #FFE3E3 | #FFA4A4 | #FF8B8B | #FF8888 | #FF6060 | #B60000 | |
| Orange or brown | 30° | #FF8000 | #FFE5CC | #FFAA55 | #FF9123 | #FF8E1C | #E97500 | #8C4600 | |
| Yellow | 60° | #FFFF00 | #F1F100 | #C3C300 | #B3B300 | #B1B100 | #9B9B00 | #5C5C00 | |
| Chartreuse | 90° | #80FF00 | #AEFF5C | #6BD500 | #61C300 | #61C100 | #54A900 | #326500 | |
| Green | 120° | #00FF00 | #9EFF9E | #00DB00 | #00C900 | #00C700 | #00AE00 | #006800 | |
| Spring green | 150° | #00FF80 | #8DFFC6 | #00D96D | #00C763 | #00C563 | #00AC56 | #006733 | |
| Cyan | 180° | #00FFFF | #60FFFF | #00D2D2 | #00C0C0 | #00BFBF | #00A6A6 | #006363 | |
| Dodger blue | 210° | #0080FF | #D4ECFF | #84C2FF | #64B2FF | #60B0FF | #3098FF | #0057AF | |
| Blue | 240° | #0000FF | #E7E7FF | #B6B6FF | #A4A4FF | #A2A2FF | #8888FF | #3030FF | |
| Electric indigo | 270° | #8000FF | #F2E4FF | #D5ABFF | #CB96FF | #C994FF | #B974FF | #7600EC | |
| Magenta | 300° | #FF00FF | #FFDFFF | #FF97FF | #FF76FF | #FF73FF | #FF29FF | #9F009F | |
| Deep pink | 330° | #FF0080 | #FFE1F2 | #FF9FCF | #FF84C1 | #FF81C0 | #FF52A8 | #B00058 | |
| Grey | — | #808080 | #E9E9E9 | #BDBDBD | #ADADAD | #ABABAB | #959595 | #595959 | |
| HTML name | WCAG level |
|---|---|
| White | AAA with unvisited links |
| Ivory | AAA with unvisited links |
| MintCream | AAA with unvisited links |
| Azure | AAA with unvisited links |
| Snow | AAA with unvisited links |
| Honeydew | AAA with unvisited links |
| FloralWhite | AAA with unvisited links |
| GhostWhite | AAA with unvisited links |
| AliceBlue | AAA with unvisited links |
| Seashell | AAA with unvisited links |
| OldLace | AAA with unvisited links |
| WhiteSmoke | AAA with unvisited links |
| LavenderBlush | AAA with unvisited links |
| Beige | AAA with unvisited links |
| Linen | AAA with unvisited links |
| AntiqueWhite | AAA with unvisited links |
| MistyRose | AAA with unvisited links |
| LightYellow | AAA with unvisited links |
| LemonChiffon | AAA with unvisited links |
| LightGoldenrodYellow | AAA with unvisited links |
| PapayaWhip | AAA with unvisited links |
| Cornsilk | AAA with unvisited links |
| BlanchedAlmond | AAA with unvisited links |
| LightCyan | AAA with unvisited links |
| Yellow | AAA with unvisited links |
| Cyan | AAA with unvisited links |
| Moccasin | AA with unvisited links |
| PaleGoldenrod | AA with unvisited links |
| Khaki | AA with unvisited links |
| PeachPuff | AA with unvisited links |
| Gold | AA with unvisited links |
| GreenYellow | AA with unvisited links |
| PaleGreen | AA with unvisited links |
| Chartreuse | AA with unvisited links |
| LawnGreen | AA with unvisited links |
| SpringGreen | AA with unvisited links |
| Lime | AA with unvisited links |
| MediumSpringGreen | AA with unvisited links |
| LightGreen | AA with unvisited links |
| YellowGreen | AA with unvisited links |
| Aquamarine | AA with unvisited links |
| PaleTurquoise | AA with unvisited links |
| Turquoise | AA with unvisited links |
| MediumTurquoise | AA with unvisited links |
| PowderBlue | AA with unvisited links |
| LightBlue | AA with unvisited links |
| LightSteelBlue | AA with unvisited links |
| LightSkyBlue | AA with unvisited links |
| SkyBlue | AA with unvisited links |
| Lavender | AA with unvisited links |
| Thistle | AA with unvisited links |
| Pink | AA with unvisited links |
| LightPink | AA with unvisited links |
| Bisque | AA with unvisited links |
| NavajoWhite | AA with unvisited links |
| Wheat | AA with unvisited links |
| Burlywood | AA with unvisited links |
| Gainsboro | AA with unvisited links |
| LightGray | AA with unvisited links |
| Silver | AA with unvisited links |
| Plum | AAA with visited links |
| LightSalmon | AAA with visited links |
| Orange | AAA with visited links |
| Black | AAA with white text |
| DarkSlateGray | AAA with white text |
| Navy | AAA with white text |
| DarkBlue | AAA with white text |
| MidnightBlue | AAA with white text |
| MediumBlue | AAA with white text |
| Blue | AAA with white text |
| Indigo | AAA with white text |
| Purple | AAA with white text |
| DarkSlateBlue | AAA with white text |
| DarkMagenta | AAA with white text |
| DarkRed | AAA with white text |
| Maroon | AAA with white text |
| SaddleBrown | AAA with white text |
| Brown | AAA with white text |
| DarkGreen | AAA with white text |
| Teal | AAA with white text |
| DimGray | AA with white text |
| MediumVioletRed | AA with white text |
| Firebrick | AA with white text |
| Crimson | AA with white text |
| DarkOliveGreen | AA with white text |
| Green | AA with white text |
See also[edit]
Templates[edit]
- To colour text and background:
- {{Font color}}
- {{background color}}
- {{font}}
- To provide example squares of colour:
- {{Color sample}}
- {{Swatch}}
- {{Swatch inline}}
- To provide a list colors
- {{Colornames}}
- {{Formula Supported Named Colors}}
- {{X11 color chart}}
- {{Web Colors}}