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

Материал из Тептар — свободной энциклопедии
Перейти к навигации Перейти к поиску
Документация

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

Использование[править код]

Примеры со светлым фоном[править код]

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

Примеры с тёмным фоном[править код]

Цвет
текста
Цвет
фона
Пример Код Коэффициент
контраста
WCAG 2.0
утв.
Шаблон:Color sample #BADFEE Шаблон:Color sample black   Пример   {{Цветовой контраст|#BaDFeE|BlAcK}} 14.878 AAA
Шаблон:Color sample red Шаблон:Color sample black   Пример   {{Цветовой контраст|red|black}} 5.252 AA
Шаблон:Color sample #FFFF00 Шаблон:Color sample #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.

См. также[править код]