Movatterモバイル変換


[0]ホーム

URL:


Jump to content
WikipediaThe Free Encyclopedia
Search

Wikipedia:Manual of Style/Accessibility/Colors

From Wikipedia, the free encyclopedia
<Wikipedia:Manual of Style |Accessibility
(Redirected fromWikipedia:Manual of Style/Accessibility/Colours)
Table of colours which are WCAG AAA compatible for 14 different hues
"MOS:COLORS" redirects here. For the MOS guideline on color use and contrast ratios in articles, seeMOS:COLOR. This page is for more technical help on color use, seeHelp:Using colors andHelp:Link color. For the WikiProject, seeWikipedia:WikiProject Color. For the civility essay dealing with colors, seeWikipedia:Don't edit war over the color of templates.
This help page is ahow-to guide.
It explains concepts or processes usedWikipedia:Manual of Style/Accessibility It is not one ofWikipedia's policies or guidelines, and may reflect varying levels ofconsensus.

These color tables should help editors choose accessible backgrounds matching various color schemes. The first table containsWCAG AAA compatible for 14 differenthues, 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 itslightness inHSL to achieve the necessary WCAGcontrast ratio, which is defined as a ratio of slightly modified CIErelative luminance values.

It is best to choose background colors that offer sufficient contrast in relation to text andblue links, which is also the color of references, both of which are very common in most articles. Use theWCAG 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 colorDarkest backgrounds for dark textLightest background for white text
NameHueHexColorText andlinks
(WCAG AA)
Text onlyPure black text
(not default)
RedFF0000FFE6E6FF8888FF6060B60000
Orange30°FF8000FFE8D0FF8E1CE975008C4600
Yellow60°FFFF00F3F300B1B1009B9B005C5C00
Chartreuse90°80FF00B9FF7261C10054A900326500
Green120°00FF00ABFFAB00C70000AE00006800
Spring green150°00FF809DFFCE00C56300AC56006733
Cyan180°00FFFF7DFFFF00BFBF00A6A6006363
Azure210°0080FFDCEEFF60B0FF3098FF0057AF
Blue240°0000FFEAEAFFA2A2FF8888FF3030FF
Violet270°8000FFF3E7FFC994FFB974FF7600EC
Magenta300°FF00FFFFE3FFFF73FFFF29FF9F009F
Rose330°FF0080FFE4F1FF81C0FF52A8B00058
Grey808080EBEBEBABABAB959595595959

Web colors

[edit]

Named web colors

[edit]

The followingweb 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


WCAG AAA with white text

  • Black
  • DarkSlateGray
  • Navy
  • DarkBlue
  • MidnightBlue
  • MediumBlue
  • Blue
  • Indigo
  • Purple
  • DarkSlateBlue
  • DarkMagenta
  • DarkRed
  • Maroon
  • SaddleBrown
  • Brown
  • DarkGreen

WCAG AA with white text

  • DimGray
  • MediumVioletRed
  • Firebrick
  • Crimson
  • DarkOliveGreen
  • Green
  • Teal

Shorthand web colors

[edit]

Many of theseweb colors are used as background colors fortable cell templates, particularly in the yellow-green-cyan hue range. For the blue-magenta-red range, some of these templates use slightly darker colors to achieve slightly more intensecolorfulness in specific cases.

WCAG AAA with unvisited links
FEFFFEEFDEFEDFEEFF
FFDCFEDFF
FFCEFCDFCDFDBFECFF
FFBEFBDFBCFBCFCCFDBFF
FFAEFADFACFABFDAFF
FEEFF9EF9DF9CF9BFBBFC9FF
FEDFF8EF8DF8CF8AFC
FECFF7EF7DF7CF7
FEBFF6EF6DF6CF6
FEAFF5EF5DF5CF5
FE9FF4EF4DF4CF4
FE8FF3EF3DF3CF3BFAAFD
FE7FF2EF2DF2CF2BF9AFE
FE6FF1EF1DF1CF1BF89FE
FE5FF0EF0DF0CF0BF79FD8FF
EECEEDEEEEEFDEF

Categorical palettes

[edit]

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

  • 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.
Retrieved from "https://en.wikipedia.org/w/index.php?title=Wikipedia:Manual_of_Style/Accessibility/Colors&oldid=1332363230"
Categories:

[8]ページ先頭

©2009-2026 Movatter.jp