Шаблон:Цветовой контраст

Документация
[просмотр | править | история | обновить]

Данный шаблон возвращает коэффициент цветового контраста между цветами. Он работает с двумя цветовыми представлениями, это может быть стандартный RGB hex color code (#RRGGBB) или стандартный HTML color с включением цвета orange из CSS (= #FFA500). Имена цветов не зависят от регистра (то есть, они могут быть написаны как строчными, так и заглавными буквами).

Использование

Примеры со светлым фоном

Цвет
текста		 Цвет
фона		 Пример Код Коэффициент
контраста		 WCAG 2.0
утв.
  #000000   #FFFFFF   Пример   {{Цветовой контраст|#000000|#FFFFFF}} 21 AAA
  #000080   #DDDDDD   Пример   {{Цветовой контраст|#000080|#DDDDDD}} 11.787 AAA
  #7B0000   #FF9900   Пример   {{Цветовой контраст|#7B0000|#FF9900}} 5.324 AA
  #004800   #AAAAAA   Пример   {{Цветовой контраст|#004800|#AAAAAA}} 4.691 AA
  red   white   Пример   {{Цветовой контраст|red|white}} 3.998 Нет
  #FF0000   #FF9999   Пример   {{Цветовой контраст|#FF0000|#FF9999}} 1.955 Нет

Примеры с тёмным фоном

Цвет
текста		 Цвет
фона		 Пример Код Коэффициент
контраста		 WCAG 2.0
утв.
  #BADFEE   black   Пример   {{Цветовой контраст|#BaDFeE|BlAcK}} 14.878 AAA
  red   black   Пример   {{Цветовой контраст|red|black}} 5.252 AA
  #FFFF00   #00FFFF   Пример   {{Цветовой контраст|#FFFF00|#00FFFF}} 1.168 Нет

WCAG 2.0

Для выбора оптимального цветового контраста текста и фона используйте «Руководство по обеспечению доступности веб-контента (WCAG) 2.0», в котором изложено следующее:

Оптимальный цветовой контраст для текста по версии WCAG 2.0
Размер шрифта Не соответствует Уровень AA Уровень AAA
Обычный меньше 4.5 от 4.5 до 7.0 больше 7.0
Большой (18 pt или жирный 14 pt) меньше 3.0 от 3.0 до 4.5 больше 4.5

Обычный вики-текст в большинстве браузеров имеет размер от 9.5pt до 10.5pt (от 12.5px до 14px), в зависимости от используемого скина. Для того чтобы квалифицировать текст как «большой», его размер должен быть 180% от обычного, или жирным 140% от обычного, согласно WCAG.

См. также

Во избежание поломок страниц, использующих этот шаблон, экспериментируйте в песочнице (создать | зеркало) или своём личном пространстве.
Пожалуйста, добавляйте категории на подстраницу /doc. Подстраницы этого шаблона.