Interested Article - Цветовой контраст

Документация

[ просмотр | править | история | обновить ]

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

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

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

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

Цвет текста	Цвет фона	Пример	Код	Коэффициент контраста	утв.
#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	Нет

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

Цвет текста	Цвет фона	Пример	Код	Коэффициент контраста	утв.
#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
Размер шрифта	Не соответствует	Уровень 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% от обычного, согласно .