Википедия:Руководство по стилю/Доступность/Цвета

Таблица цветов, совместимых с WCAG AAA, для 14 различных оттенков

Эти таблицы цветов должны помочь редакторам выбирать доступные фоны, соответствующие различным цветовым схемам. Первая таблица содержит WCAG AAA-совместимые для 14 различных оттенков , а также серого и коричневого. В каждой строке «базовый цвет» является простейшим представлением оттенка. Другие цвета выводятся из базового цвета путем изменения его светлоты в HSL для достижения необходимого коэффициента контрастности WCAG , который определяется как отношение слегка измененных значений относительной яркости CIE .

Лучше всего выбирать фоновые цвета, которые обеспечивают достаточный контраст по отношению к тексту и синим ссылкам , которые также являются цветом ссылок, оба из которых очень распространены в большинстве статей. Используйте средство проверки контрастности ссылок WCAG, чтобы убедиться, что выбранный фоновый цвет обеспечивает рекомендуемый уровень контрастности WCAG AA по отношению к обычному тексту (#202122) и синим ссылкам (#3366CC для скина Vector 2022 по умолчанию). [1] WCAG AA требуется различными государственными органами в США, ЕС, Великобритании и Канаде.

Если ссылки и отсылки отсутствуют, дополнительный контраст возможен путем установки цвета текста на чисто черный (#000000). Если требуется темный фон, его следует использовать на белом тексте (#FFFFFF) без ссылок и отсылок.

Совместимые цвета фона WCAG AAA для текста и ссылок
Базовый цветСамый темный фон для темного текстаСамый светлый фон для белого текста
ИмяОттенокШестигранникЦветТекст и ссылки
(WCAG AA)
Только текстЧисто черный текст
(не по умолчанию)
КрасныйФФ0000ФФЕ6Е6ФФ8888ФФ6060Б60000
Апельсин30°ФФ8000ФФЕ8Д0ФФ8Е1СЕ975008C4600
Желтый60°ФФФФ00Ф3Ф300В1В1009B9B005C5C00
Шартрез90°80FF00Б9ФФ7261С10054А900326500
Зеленый120°00FF00АБФФАБ00C70000AE00006800
Весенне-зелёный150°00FF809DFFCE00C563#00AC56006733
Голубой180°00ФФФФ7DFFFF00БФБФ00A6A6006363
Лазурный210°0080FFDCEEFF60Б0ФФ3098FF0057АФ
Синий240°0000FFЕАЕАФФА2А2ФФ8888FF3030FF
Фиолетовый270°8000FFФ3Е7ФФC994FFB974FF7600EC
пурпурный300°ФФ00ФФФФЕ3ФФФФ73ФФФФ29ФФ9F009F
Роза330°ФФ0080ФФЕ4Ф1ФФ81С0ФФ52А8Б00058
Серый808080ЭБЕБЕБАБАБАБ959595595959

Веб-цвета

Именованные веб-цвета

Следующие веб-цвета поддерживаются всеми основными браузерами с 2005 года.

WCAG AA с текстом и синими ссылками:

  • Белый
  • Слоновая кость
  • МятныйКрем
  • Лазурный
  • Снег
  • Нектар
  • ЦветочныйБелый
  • GhostWhite
  • AliceBlue
  • Ракушка
  • OldLace
  • БелыйДым
  • ЛавандовыйРумяна
  • Бежевый
  • Шерсть
  • АнтичныйБелый
  • Светло-желтый
  • ЛимонныйШифон
  • СветлыйЗолотарникЖелтый
  • ПапайяВип
  • Кукурузные рыльца
  • БланшированныйМиндаль
  • Светло-голубой
  • Желтый


WCAG AAA с белым текстом

  • Черный
  • DarkSlateGray
  • Военно-морской
  • Темно-синий
  • MidnightBlue
  • MediumBlue
  • Синий
  • Индиго
  • Фиолетовый
  • DarkSlateBlue
  • Темно-пурпурный
  • Темно-красный
  • Бордовый
  • Седло-коричневый
  • Коричневый
  • Темно-зеленый

WCAG AA с белым текстом

  • ДимГрэй
  • СреднийФиолетовыйКрасный
  • Огнеупорный кирпич
  • Малиновый
  • Темно-оливковыйзеленый
  • Зеленый
  • Бирюзовый

Сокращенные веб-цвета

Многие из этих веб-цветов используются в качестве фоновых цветов для шаблонов ячеек таблиц , особенно в диапазоне оттенков желтого-зеленого-голубого. Для диапазона синего-пурпурного-красного некоторые из этих шаблонов используют немного более темные цвета, чтобы достичь немного более интенсивной красочности в определенных случаях.

WCAG AAA с непросмотренными ссылками
ФЭФФФЕЭФДЭФЕДФЭЭФФ
ФФДCFEДФФ
ФФКЕФКДФКДФДБФЕКФФ
ФФБЭФБDFBЦКСХФУCFDЛучший друг
ФФАОДВДФАCFAБФДАФФ
ПЛАТЕЖФФ9ЭФ9ДФ9CF9БФББФК9FF
ФРСФФ8ЭФ8DF8CF8АФК
ФЭКФФ7ЭФ7ДФ7CF7
ФЕВФФ6ЭФ6ДФ6CF6
ВЭДФФ5ЭФ5ДФ5CF5
ФЕ9ФФ4ЭФ4DF4CF4
ФЕ8ФФ3ЭФ3ДФ3CF3БФААФД
ФЕ7ФФ2ЭФ2ДФ2CF2БФ9АФЭ
ФЕ6ФФ1ЭФ1ДФ1CF1БФ89ФЭ
ФЕ5ФФ0ЭФ0ДФ0CF0БФ79FD8FF
ЕЭСЭЭДЕЕЕЭЭФОПРЕДЕЛЕНИЕ

Категориальные палитры

Качественную палитру Pastel 2 Brewer можно слегка осветлить (в цветовом пространстве HSL ), чтобы она стала совместимой с WCAG AAA для непосещенных ссылок, что приведет к следующим цветам:

  • Д9Ф1Е6
  • FEE7D6
  • E7ECF4
  • FAE6F2
  • Е6Ф5С9
  • FFF2AE
  • F5EAD9
  • ЭБЕБЕБ

Чтобы легко использовать эту палитру, см. {{ CellCategory }} и {{ CategoryBgColor }} .

Смотрите также

Ссылки

  1. ^ "WCAG 2.0 и цвета ссылок". Блог WebAIM . WebAIM. 22 июля 2009 г.
Взято с "https://en.wikipedia.org/w/index.php?title=Wikipedia:Руководство_по_стилю/Доступность/Цвета&oldid=1245475299"