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

{{Docpage}}<noinclude>{{К улучшению|2023-07-08}}</noinclude>
<!-- Categories and interwikis go at the bottom of this page. -->
{{OnLua|Color contrast}}
Данный шаблон возвращает коэффициент цветового контраста между цветами. Он работает с двумя цветовыми представлениями, это может быть стандартный ''RGB hex color code'' (<code>#RRGGBB</code>) или стандартный ''[[Цвета HTML#Имена цветов в HTML|HTML color]]'' с включением цвета ''orange'' из CSS  (= <code>#FFA500</code>). Имена цветов не зависят от регистра (то есть, они могут быть написаны как строчными, так и заглавными буквами).

== Использование ==
=== Примеры со светлым фоном ===
{| class="wikitable"
|-
! Цвет<BR>текста !! Цвет<BR>фона !! Пример !! Код !! Коэффициент<BR>контраста !! [[:en:WCAG 2.0|WCAG 2.0]]<BR>утв.
|-
| {{Color sample|#000000}} #000000
| {{Color sample|#FFFFFF}} #FFFFFF
| {{oncolor|#FFFFFF|#000000|&nbsp;&nbsp;Пример&nbsp;&nbsp;}}
| {{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|&nbsp;&nbsp;Пример&nbsp;&nbsp;}}
| {{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|&nbsp;&nbsp;Пример&nbsp;&nbsp;}}
| {{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|&nbsp;&nbsp;Пример&nbsp;&nbsp;}}
| {{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|&nbsp;&nbsp;Пример&nbsp;&nbsp;}}
| {{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|&nbsp;&nbsp;Пример&nbsp;&nbsp;}}
| {{Tc|_tag=code|Цветовой контраст|#FF0000|#FF9999}}
| style="text-align: right;" | {{#expr: {{Цветовой контраст|#FF0000|#FF9999}} round3}}
| {{no}}
|}

=== Примеры с тёмным фоном ===
{| class="wikitable"
|-
! Цвет<BR>текста !! Цвет<BR>фона !! Пример !! Код !! Коэффициент<BR>контраста !! [[:en:WCAG 2.0|WCAG 2.0]]<BR>утв.
|-
| {{Color sample|#BADFEE}} #BADFEE
| {{Color sample|black}} black
| {{oncolor|black|#BADFEE|&nbsp;&nbsp;Пример&nbsp;&nbsp;}}
| {{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|&nbsp;&nbsp;Пример&nbsp;&nbsp;}}
| {{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|&nbsp;&nbsp;Пример&nbsp;&nbsp;}}
| {{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&nbsp;pt или жирный 14&nbsp;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>