Стандарт WCAG[en] 2.0 визначає контраст рівня AAA як вищий ніж 7:1, а рівня AA — як вищий ніж 4.5:1.
На цій сторінці вказаний частковий випадок — таблиці показника контрастності деяких кольорів до білого фону.
Рекомендовані
Для тексту на білому фоні, кольори CSS, що нижче наведені, відповідають мінімальному коефіцієнту контрастності (4.5:1), визначеному настановами з доступності вебконтенту[en] (WCAG) 2.0 Level AA.
Контраст[a] |
Приклад кольору |
Назва кольору (жирним шрифтом) |
Hex |
AAA[b]
|
21 |
|
Black |
#000000 |
Так
|
16.009 |
|
Navy |
#000080 |
Так
|
15.297 |
|
DarkBlue |
#00008B |
Так
|
14.847 |
|
MidnightBlue |
#191970 |
Так
|
12.95 |
|
Indigo |
#4B0082 |
Так
|
11.16 |
|
MediumBlue |
#0000CD |
Так
|
10.949 |
|
Maroon |
#800000 |
Так
|
10.01 |
|
DarkRed |
#8B0000 |
Так
|
9.418 |
|
Purple |
#800080 |
Так
|
9.067 |
|
DarkSlateBlue |
#483D8B |
Так
|
8.927 |
|
DarkSlateGray |
#2F4F4F |
Так
|
8.927 |
|
DarkSlateGrey |
#2F4F4F |
Так
|
8.592 |
|
Blue |
#0000FF |
Так
|
8.528 |
|
(відсутня)[c] |
#0645AD |
Так
|
8.499 |
|
DarkMagenta |
#8B008B |
Так
|
8.405 |
|
RebeccaPurple |
#663399 |
Так
|
7.439 |
|
DarkGreen |
#006400 |
Так
|
7.098 |
|
SaddleBrown |
#8B4513 |
Так
|
7.083 |
|
Brown |
#A52A2A |
Так
|
6.677 |
|
FireBrick |
#B22222 |
Ні
|
6.562 |
|
DarkViolet |
#9400D3 |
Ні
|
5.958 |
|
BlueViolet |
#8A2BE2 |
Ні
|
5.948 |
|
DarkOliveGreen |
#556B2F |
Ні
|
5.702 |
|
DarkOrchid |
#9932CC |
Ні
|
5.615 |
|
Sienna |
#A0522D |
Ні
|
5.489 |
|
DimGray |
#696969 |
Ні
|
5.489 |
|
DimGrey |
#696969 |
Ні
|
5.42 |
|
MediumVioletRed |
#C71585 |
Ні
|
5.307 |
|
SlateBlue |
#6A5ACD |
Ні
|
5.137 |
|
Green |
#008000 |
Ні
|
4.989 |
|
Crimson |
#DC143C |
Ні
|
4.846 |
|
RoyalBlue |
#4169E1 |
Ні
|
4.773 |
|
Teal |
#008080 |
Ні
|
Не рекомендовані
Для тексту на білому фоні, кольори CSS, що нижче наведені, не відповідають мінімальному коефіцієнту контрастності (4.5:1), визначеному настановами з доступності вебконтенту[en] (WCAG) 2.0 Level AA.
Контраст[d] |
Приклад кольору |
Назва кольору |
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
|
Див. також
Коментарі
- ↑ Контраст відносно білого кольору, з Snook's Colour Contrast Check. Опускає :1 з метою спрощення (та сортування за числами), тому n відповідає n:1.
- ↑ Вказує, чи відповідає колір мінімальному коефіцієнту контрастності (7:1), визначеному WCAG 2.0 Level AAA.
- ↑ Стандартний колір не відвіданого посилання для теми Вектор у Вікіпедії, станом на 2019. Джерела: en:Help:Link color та [1]
- ↑ Контраст відносно білого кольору, з Snook's Colour Contrast Check. Опускає :1 з метою спрощення (та сортування за числами), тому n відповідає n:1.