维基百科:格式手册/无障碍/颜色表

本页中的颜色表旨在帮助编辑者挑选符合无障碍条件的背景配色。第一表展示14种色相和灰色的WCAG AAA等级配色。每列中的“基础颜色”是该色相最简单的颜色,而其他颜色则由基础颜色的HSL明度变化而来,以达到WCAG所需的对比度

编辑者应确保背景颜色与一般文字和蓝色链接的对比度足够高,因为这两种是大多数条目最常出现的颜色。您可以通过WCAG链接对比度检查器确定所选的背景颜色与一般文字(#202122)和蓝色链接(Vector 2022皮肤:#3366CC)的对比度能达到WCAG AA等级的要求。[1]

如果页面没有链接和参考,则您可以将文字颜色设为纯黑色(#000000),提高对比度。深色背景需要使用白色文字(#FFFFFF)比照。

各基础颜色的AAA等级背景颜色(与文字和链接对比)
基础颜色 深色文本的最深色背景 白色文本的最浅色背景
名称 色相 十六进制 颜色 文字和链接
(WCAG AA)
仅限文字 纯黑文字
(非默认)
红色 FF0000 FFE6E6 FF8888 FF6060 B60000
橙色 30° FF8000 FFE8D0 FF8E1C E97500 8C4600
黄色 60° FFFF00 F3F300 B1B100 9B9B00 5C5C00
黄绿 90° 80FF00 B9FF72 61C100 54A900 326500
绿色 120° 00FF00 ABFFAB 00C700 00AE00 006800
春绿 150° 00FF80 9DFFCE 00C563 #00AC56 006733
青色 180° 00FFFF 7DFFFF 00BFBF 00A6A6 006363
天蓝 210° 0080FF DCEEFF 60B0FF 3098FF 0057AF
蓝色 240° 0000FF EAEAFF A2A2FF 8888FF 3030FF
紫色 270° 8000FF F3E7FF C994FF B974FF 7600EC
品红 300° FF00FF FFE3FF FF73FF FF29FF 9F009F
玫瑰 330° FF0080 FFE4F1 FF81C0 FF52A8 B00058
灰色 808080 EBEBEB ABABAB 959595 595959

网页颜色

网页颜色名称

自2005年以来,所有主要浏览器都支持以下网页颜色

与文字和蓝色链接对比时皆达到WCAG AA等级:

  • 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等级:

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

与白色文字对比时达到WCAG AA等级:

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

网页颜色简写

以下网页颜色很多都是表格单元格模板的背景颜色,特别是黄-绿-青范围的颜色。有些模板使用蓝-粉-红范围的颜色时,会选用稍微更深的颜色,加强色度

与未访问链接对比时达到WCAG AAA等级的颜色
FEF FFE EFD EFE DFE EFF
FFD CFE DFF
FFC EFC DFC DFD BFE CFF
FFB EFB DFB CFB CFC CFD BFF
FFA EFA DFA CFA BFD AFF
FEE FF9 EF9 DF9 CF9 BFB BFC 9FF
FED FF8 EF8 DF8 CF8 AFC
FEC FF7 EF7 DF7 CF7
FEB FF6 EF6 DF6 CF6
FEA FF5 EF5 DF5 CF5
FE9 FF4 EF4 DF4 CF4
FE8 FF3 EF3 DF3 CF3 BFA AFD
FE7 FF2 EF2 DF2 CF2 BF9 AFE
FE6 FF1 EF1 DF1 CF1 BF8 9FE
FE5 FF0 EF0 DF0 CF0 BF7 9FD 8FF
EEC EED EEE EEF DEF

参见

参考文献

  1. ^ WCAG 2.0 and Link Colors. WebAIM Blog. WebAIM. 22 July 2009.