Дидани манбаъи Шаблон:Контрасти ранг/doc

{{Documentation subpage}}
<!-- 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
| {{Font color|#000000|#FFFFFF|&nbsp;&nbsp;Пример&nbsp;&nbsp;}}
| {{tc|_tag=tt|Цветовой контраст|#000000|#FFFFFF}}
| style="text-align: right;" | {{#expr: {{Цветовой контраст|#000000|#FFFFFF}} round3}}
| AAA
|-
| {{Color sample|#000080}} #000080
| {{Color sample|#DDDDDD}} #DDDDDD
| {{Font color|#000080|#DDDDDD|&nbsp;&nbsp;Пример&nbsp;&nbsp;}}
| {{tc|_tag=tt|Цветовой контраст|#000080|#DDDDDD}}
| style="text-align: right;" | {{#expr: {{Цветовой контраст|#000080|#DDDDDD}} round3}}
| AAA
|-
| {{Color sample|#7B0000}} #7B0000
| {{Color sample|#FF9900}} #FF9900
| {{Font color|#7B0000|#FF9900|&nbsp;&nbsp;Пример&nbsp;&nbsp;}}
| {{tc|_tag=tt|Цветовой контраст|#7B0000|#FF9900}}
| style="text-align: right;" | {{#expr: {{Цветовой контраст|#7B0000|#FF9900}} round3}}
| AA
|-
| {{Color sample|#004800}} #004800
| {{Color sample|#AAAAAA}} #AAAAAA
| {{Font color|#004800|#AAAAAA|&nbsp;&nbsp;Пример&nbsp;&nbsp;}}
| {{tc|_tag=tt|Цветовой контраст|#004800|#AAAAAA}}
| style="text-align: right;" | {{#expr: {{Цветовой контраст|#004800|#AAAAAA}} round3}}
| AA
|-
| {{Color sample|red}} red
| {{Color sample|white}} white
| {{Font color|red|white|&nbsp;&nbsp;Пример&nbsp;&nbsp;}}
| {{tc|_tag=tt|Цветовой контраст|red|white}}
| style="text-align: right;" | {{#expr: {{Цветовой контраст|red|white}} round3}}
| {{no}}
|-
| {{Color sample|#FF0000}} #FF0000
| {{Color sample|#FF9999}} #FF9999
| {{Font color|#FF0000|#FF9999|&nbsp;&nbsp;Пример&nbsp;&nbsp;}}
| {{tc|_tag=tt|Цветовой контраст|#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
| {{Font color|#BADFEE|black|&nbsp;&nbsp;Пример&nbsp;&nbsp;}}
| {{tc|_tag=tt|Цветовой контраст|#BaDFeE|BlAcK}}
| style="text-align: right;" | {{#expr: {{Цветовой контраст|#BaDFeE|BlAcK}} round3}}
| AAA
|-
| {{Color sample|red}} red
| {{Color sample|black}} black
| {{Font color|red|black|&nbsp;&nbsp;Пример&nbsp;&nbsp;}}
| {{tc|_tag=tt|Цветовой контраст|red|black}}
| style="text-align: right;" | {{#expr: {{Цветовой контраст|red|black}} round3}}
| AA
|-
| {{Color sample|#FFFF00}} #FFFF00
| {{Color sample|#00FFFF}} #00FFFF
| {{Font color|#FFFF00|#00FFFF|&nbsp;&nbsp;Пример&nbsp;&nbsp;}}
| {{tc|_tag=tt|Цветовой контраст|#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 to 7.0
| > 7.0
|-
| Большой (18&nbsp;pt или жирный 14&nbsp;pt)
| < 3.0
| 3.0 to 4.5
| > 4.5
|}
Обычный вики-текст в большинстве браузеров имеет размер от 9.5pt до 10.5pt (от 12.5px до 14px), в зависимости от используемого скина. Для того, чтобы квалифицировать текст как «Большой», его размер должен быть 180 % от обычного, или жирным 140 % от обычного, согласно [https://www.w3.org/Translations/WCAG20-ru/#larger-scaledef WCAG].

== Ҳамчунин нигаред ==
* [[Шаблон:Color contrast conformance]]
* [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>
<!-- Categories and interwikis go here: -->
[[Гурӯҳ:Шаблонҳо:Ороишоти рангҳо]]
</includeonly>