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

Материал из Народные Сказки
Версия от 21:35, 30 апреля 2024; Импортёр (обсуждение | вклад) (1 версия импортирована)
(разн.) ← Предыдущая версия | Текущая версия (разн.) | Следующая версия → (разн.)
Документация

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

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

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

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

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

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

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.

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