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

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

См. также

• ТП:ЦВЕТ
• Проект:Технические работы/Цвета
• {{Проверка цветового контраста}}
• Contrast ratio от LeaVerou
• Colour Contrast Check
• G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text
• Index of Color Contrast Samples