Шаблон:Цветовой контраст/doc - История изменений

Andras в 09:18, 29 февраля 2024

2024-02-29T09:18:37Z

Andras: Новая страница: «{{Docpage}}{{К улучшению|2023-07-08}} {{OnLua|Color contrast}} Данный шаблон возвращает коэффициент цветового контраста между цветами. Он работает с двумя цветовыми представлениями, это может быть стандартный ''RGB hex color code'' (
2023-07-08T18:48:01Z

Новая страница: «{{Docpage}}<noinclude>{{К улучшению|2023-07-08}}</noinclude>  {{OnLua|Color contrast}} Данный шаблон возвращает коэффициент цветового контраста между цветами. Он работает с двумя цветовыми представлениями, это может быть стандартный ''RGB hex color code'' (<cod...»

Новая страница
{{Docpage}}<noinclude>{{К улучшению|2023-07-08}}</noinclude>

{{OnLua|Color contrast}}
Данный шаблон возвращает коэффициент цветового контраста между цветами. Он работает с двумя цветовыми представлениями, это может быть стандартный ''RGB hex color code'' (<code>#RRGGBB</code>) или стандартный ''[[Цвета HTML#Имена цветов в HTML|HTML color]]'' с включением цвета ''orange'' из CSS (= <code>#FFA500</code>). Имена цветов не зависят от регистра (то есть, они могут быть написаны как строчными, так и заглавными буквами).

== Использование ==
=== Примеры со светлым фоном ===
{| class="wikitable"
|-
! Цвет текста !! Цвет фона !! Пример !! Код !! Коэффициент контраста !! [[:en:WCAG 2.0|WCAG 2.0]] утв.
|-
| {{Color sample|#000000}} #000000
| {{Color sample|#FFFFFF}} #FFFFFF
| {{oncolor|#FFFFFF|#000000|  Пример  }}
| {{tc|_tag=code|Цветовой контраст|#000000|#FFFFFF}}
| style="text-align: right;" | {{#expr: {{Цветовой контраст|#000000|#FFFFFF}} round3}}
| AAA
|-
| {{Color sample|#000080}} #000080
| {{Color sample|#DDDDDD}} #DDDDDD
| {{oncolor|#DDDDDD|#000080|  Пример  }}
| {{tc|_tag=code|Цветовой контраст|#000080|#DDDDDD}}
| style="text-align: right;" | {{#expr: {{Цветовой контраст|#000080|#DDDDDD}} round3}}
| AAA
|-
| {{Color sample|#7B0000}} #7B0000
| {{Color sample|#FF9900}} #FF9900
| {{oncolor|#FF9900|#7B0000|  Пример  }}
| {{tc|_tag=code|Цветовой контраст|#7B0000|#FF9900}}
| style="text-align: right;" | {{#expr: {{Цветовой контраст|#7B0000|#FF9900}} round3}}
| AA
|-
| {{Color sample|#004800}} #004800
| {{Color sample|#AAAAAA}} #AAAAAA
| {{oncolor|#AAAAAA|#004800|  Пример  }}
| {{tc|_tag=code|Цветовой контраст|#004800|#AAAAAA}}
| style="text-align: right;" | {{#expr: {{Цветовой контраст|#004800|#AAAAAA}} round3}}
| AA
|-
| {{Color sample|red}} red
| {{Color sample|white}} white
| {{oncolor|white|red|  Пример  }}
| {{tc|_tag=code|Цветовой контраст|red|white}}
| style="text-align: right;" | {{#expr: {{Цветовой контраст|red|white}} round3}}
| {{no}}
|-
| {{Color sample|#FF0000}} #FF0000
| {{Color sample|#FF9999}} #FF9999
| {{oncolor|#FF9999|#FF0000|  Пример  }}
| {{tc|_tag=code|Цветовой контраст|#FF0000|#FF9999}}
| style="text-align: right;" | {{#expr: {{Цветовой контраст|#FF0000|#FF9999}} round3}}
| {{no}}
|}

=== Примеры с тёмным фоном ===
{| class="wikitable"
|-
! Цвет текста !! Цвет фона !! Пример !! Код !! Коэффициент контраста !! [[:en:WCAG 2.0|WCAG 2.0]] утв.
|-
| {{Color sample|#BADFEE}} #BADFEE
| {{Color sample|black}} black
| {{oncolor|black|#BADFEE|  Пример  }}
| {{tc|_tag=code|Цветовой контраст|#BaDFeE|BlAcK}}
| style="text-align: right;" | {{#expr: {{Цветовой контраст|#BaDFeE|BlAcK}} round3}}
| AAA
|-
| {{Color sample|red}} red
| {{Color sample|black}} black
| {{oncolor|black|red|  Пример  }}
| {{tc|_tag=code|Цветовой контраст|red|black}}
| style="text-align: right;" | {{#expr: {{Цветовой контраст|red|black}} round3}}
| AA
|-
| {{Color sample|#FFFF00}} #FFFF00
| {{Color sample|#00FFFF}} #00FFFF
| {{oncolor|#00FFFF|#FFFF00|  Пример  }}
| {{tc|_tag=code|Цветовой контраст|#FFFF00|#00FFFF}}
| style="text-align: right;" | {{#expr: {{Цветовой контраст|#FFFF00|#00FFFF}} round3}}
| {{no}}
|}

== WCAG 2.0 ==
Для выбора оптимального цветового контраста текста и фона используйте «[https://www.w3.org/Translations/WCAG20-ru/#visual-audio-contrast Руководство по обеспечению доступности веб-контента (WCAG) 2.0]», в котором изложено следующее:

{| class="wikitable"
|+ Оптимальный цветовой контраст для текста по версии WCAG 2.0
|-
! scope="col" | Размер шрифта
! scope="col" | Не соответствует
! scope="col" | Уровень AA
! scope="col" | Уровень 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), в зависимости от используемого [[:en:Wikipedia:Skin|скина]]. Для того чтобы квалифицировать текст как «большой», его размер должен быть 180% от обычного, или жирным 140% от обычного, согласно [https://www.w3.org/Translations/WCAG20-ru/#larger-scaledef WCAG].

== См. также ==
* [[ВП:ЦВЕТ]]
* [[Проект:Технические работы/Цвета]]
* {{Tl|Проверка цветового контраста}}
* [http://leaverou.github.io/contrast-ratio/ Contrast ratio от LeaVerou]
* [http://snook.ca/technical/colour_contrast/colour.html Colour Contrast Check]
* [http://www.w3.org/TR/2012/NOTE-WCAG20-TECHS-20120103/G18 G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text]
* [http://trace.wisc.edu/contrast-ratio-examples/ Index of Color Contrast Samples]

<includeonly>
[[Категория:Шаблоны:Цветовое оформление]]
</includeonly>

← Предыдущая версия		Версия от 09:18, 29 февраля 2024
Строка 13:		Строка 13:
	\| {{Color sample\|#FFFFFF}} #FFFFFF		\| {{Color sample\|#FFFFFF}} #FFFFFF
	\| {{oncolor\|#FFFFFF\|#000000\|  Пример  }}		\| {{oncolor\|#FFFFFF\|#000000\|  Пример  }}
	\| {{tc\|_tag=code\|Цветовой контраст\|#000000\|#FFFFFF}}		\| {{Tc\|_tag=code\|Цветовой контраст\|#000000\|#FFFFFF}}
	\| style="text-align: right;" \| {{#expr: {{Цветовой контраст\|#000000\|#FFFFFF}} round3}}		\| style="text-align: right;" \| {{#expr: {{Цветовой контраст\|#000000\|#FFFFFF}} round3}}
	\| AAA		\| AAA
Строка 20:		Строка 20:
	\| {{Color sample\|#DDDDDD}} #DDDDDD		\| {{Color sample\|#DDDDDD}} #DDDDDD
	\| {{oncolor\|#DDDDDD\|#000080\|  Пример  }}		\| {{oncolor\|#DDDDDD\|#000080\|  Пример  }}
	\| {{tc\|_tag=code\|Цветовой контраст\|#000080\|#DDDDDD}}		\| {{Tc\|_tag=code\|Цветовой контраст\|#000080\|#DDDDDD}}
	\| style="text-align: right;" \| {{#expr: {{Цветовой контраст\|#000080\|#DDDDDD}} round3}}		\| style="text-align: right;" \| {{#expr: {{Цветовой контраст\|#000080\|#DDDDDD}} round3}}
	\| AAA		\| AAA
Строка 27:		Строка 27:
	\| {{Color sample\|#FF9900}} #FF9900		\| {{Color sample\|#FF9900}} #FF9900
	\| {{oncolor\|#FF9900\|#7B0000\|  Пример  }}		\| {{oncolor\|#FF9900\|#7B0000\|  Пример  }}
	\| {{tc\|_tag=code\|Цветовой контраст\|#7B0000\|#FF9900}}		\| {{Tc\|_tag=code\|Цветовой контраст\|#7B0000\|#FF9900}}
	\| style="text-align: right;" \| {{#expr: {{Цветовой контраст\|#7B0000\|#FF9900}} round3}}		\| style="text-align: right;" \| {{#expr: {{Цветовой контраст\|#7B0000\|#FF9900}} round3}}
	\| AA		\| AA
Строка 34:		Строка 34:
	\| {{Color sample\|#AAAAAA}} #AAAAAA		\| {{Color sample\|#AAAAAA}} #AAAAAA
	\| {{oncolor\|#AAAAAA\|#004800\|  Пример  }}		\| {{oncolor\|#AAAAAA\|#004800\|  Пример  }}
	\| {{tc\|_tag=code\|Цветовой контраст\|#004800\|#AAAAAA}}		\| {{Tc\|_tag=code\|Цветовой контраст\|#004800\|#AAAAAA}}
	\| style="text-align: right;" \| {{#expr: {{Цветовой контраст\|#004800\|#AAAAAA}} round3}}		\| style="text-align: right;" \| {{#expr: {{Цветовой контраст\|#004800\|#AAAAAA}} round3}}
	\| AA		\| AA
Строка 41:		Строка 41:
	\| {{Color sample\|white}} white		\| {{Color sample\|white}} white
	\| {{oncolor\|white\|red\|  Пример  }}		\| {{oncolor\|white\|red\|  Пример  }}
	\| {{tc\|_tag=code\|Цветовой контраст\|red\|white}}		\| {{Tc\|_tag=code\|Цветовой контраст\|red\|white}}
	\| style="text-align: right;" \| {{#expr: {{Цветовой контраст\|red\|white}} round3}}		\| style="text-align: right;" \| {{#expr: {{Цветовой контраст\|red\|white}} round3}}
	\| {{no}}		\| {{no}}
Строка 48:		Строка 48:
	\| {{Color sample\|#FF9999}} #FF9999		\| {{Color sample\|#FF9999}} #FF9999
	\| {{oncolor\|#FF9999\|#FF0000\|  Пример  }}		\| {{oncolor\|#FF9999\|#FF0000\|  Пример  }}
	\| {{tc\|_tag=code\|Цветовой контраст\|#FF0000\|#FF9999}}		\| {{Tc\|_tag=code\|Цветовой контраст\|#FF0000\|#FF9999}}
	\| style="text-align: right;" \| {{#expr: {{Цветовой контраст\|#FF0000\|#FF9999}} round3}}		\| style="text-align: right;" \| {{#expr: {{Цветовой контраст\|#FF0000\|#FF9999}} round3}}
	\| {{no}}		\| {{no}}
Строка 61:		Строка 61:
	\| {{Color sample\|black}} black		\| {{Color sample\|black}} black
	\| {{oncolor\|black\|#BADFEE\|  Пример  }}		\| {{oncolor\|black\|#BADFEE\|  Пример  }}
	\| {{tc\|_tag=code\|Цветовой контраст\|#BaDFeE\|BlAcK}}		\| {{Tc\|_tag=code\|Цветовой контраст\|#BaDFeE\|BlAcK}}
	\| style="text-align: right;" \| {{#expr: {{Цветовой контраст\|#BaDFeE\|BlAcK}} round3}}		\| style="text-align: right;" \| {{#expr: {{Цветовой контраст\|#BaDFeE\|BlAcK}} round3}}
	\| AAA		\| AAA
Строка 68:		Строка 68:
	\| {{Color sample\|black}} black		\| {{Color sample\|black}} black
	\| {{oncolor\|black\|red\|  Пример  }}		\| {{oncolor\|black\|red\|  Пример  }}
	\| {{tc\|_tag=code\|Цветовой контраст\|red\|black}}		\| {{Tc\|_tag=code\|Цветовой контраст\|red\|black}}
	\| style="text-align: right;" \| {{#expr: {{Цветовой контраст\|red\|black}} round3}}		\| style="text-align: right;" \| {{#expr: {{Цветовой контраст\|red\|black}} round3}}
	\| AA		\| AA
Строка 75:		Строка 75:
	\| {{Color sample\|#00FFFF}} #00FFFF		\| {{Color sample\|#00FFFF}} #00FFFF
	\| {{oncolor\|#00FFFF\|#FFFF00\|  Пример  }}		\| {{oncolor\|#00FFFF\|#FFFF00\|  Пример  }}
	\| {{tc\|_tag=code\|Цветовой контраст\|#FFFF00\|#00FFFF}}		\| {{Tc\|_tag=code\|Цветовой контраст\|#FFFF00\|#00FFFF}}
	\| style="text-align: right;" \| {{#expr: {{Цветовой контраст\|#FFFF00\|#00FFFF}} round3}}		\| style="text-align: right;" \| {{#expr: {{Цветовой контраст\|#FFFF00\|#00FFFF}} round3}}
	\| {{no}}		\| {{no}}