Dzmuh: /* См. также */

2023-05-07T23:02:52Z

См. также

← Предыдущая версия		Версия от 23:02, 7 мая 2023
Строка 106:		Строка 106:

	== См. также ==		== См. также ==
	* [[ВП:ЦВЕТ]]		* [[DZWIKI:ЦВЕТ]]
	* {{tl\|Проверка цветового контраста}}		* {{tl\|Проверка цветового контраста}}
	* [http://leaverou.github.io/contrast-ratio/ Contrast ratio от LeaVerou]		* [http://leaverou.github.io/contrast-ratio/ Contrast ratio от LeaVerou]

Dzmuh в 14:31, 20 марта 2022

2022-03-20T14:31:59Z

← Предыдущая версия		Версия от 14:31, 20 марта 2022
Строка 107:		Строка 107:
	== См. также ==		== См. также ==
	* [[ВП:ЦВЕТ]]		* [[ВП:ЦВЕТ]]
	* [[Проект:Технические работы/Цвета]]
	* {{tl\|Проверка цветового контраста}}		* {{tl\|Проверка цветового контраста}}
	* [http://leaverou.github.io/contrast-ratio/ Contrast ratio от LeaVerou]		* [http://leaverou.github.io/contrast-ratio/ Contrast ratio от LeaVerou]

Dzmuh в 00:41, 4 июня 2021

2021-06-04T00:41:28Z

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

Dzmuh: Новая страница: «{{Docpage}} {{OnLua|Color contrast}} Данный шаблон возвращает коэффициент цветового контраста между цве...»

2021-04-25T21:06:22Z

Новая страница: «{{Docpage}} {{OnLua|Color contrast}} Данный шаблон возвращает коэффициент цветового контраста между цве...»

Новая страница

{{Docpage}}
{{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>

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

Dzmuh: /* См. также */

Dzmuh в 14:31, 20 марта 2022

Dzmuh в 00:41, 4 июня 2021

Dzmuh: Новая страница: «{{Docpage}} {{OnLua|Color contrast}} Данный шаблон возвращает коэффициент цветового контраста между цве...»