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

Этот шаблон реализован на основе Lua с использованием модуля Color contrast.

Данный шаблон возвращает коэффициент цветового контраста между цветами. Он работает с двумя цветовыми представлениями, это может быть стандартный 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.

См. также