عرض مصدر قالب:نسبة تباين الألوان/شرح

{{صفحة توثيق فرعية}}
<!-- فضلاً أضف التصانيف أسفل الصفحة. ووصلات الانترويكي في ويكي بيانات  -->
{{lua|وحدة:Color contrast}}
يُرجع هذا القالب نسبة تباين الألوان بين اللونين المقدمين. وهو يقبل معلمتين، يمكن أن تكونا رمز ألوان قياسي RGB (<code>#RRGGBB</code>) أو معيار [[ألوان الويب#أسماء ألوان HTML|لون HTML]] أو CSS "برتقالي" (= <code>#FFA500</code>). أسماء الألوان والأحرف السداسية غير حساسة لحالة الأحرف (أي قد تكون بأحرف كبيرة أو صغيرة).

== الاستعمال ==
=== Examples with light background ===
{| class="wikitable"
|-
! لون<BR>النص !! لون<BR>الخلفية !! نموذج !! الكود !! نسبة<BR>التباين !! [[إرشادات إتاحة محتوى الويب]]<BR>conf.
|-
| {{Color sample|#000000}} #000000
| {{Color sample|#FFFFFF}} #FFFFFF
| {{لون النص|#000000|#FFFFFF|&nbsp;&nbsp;Sample&nbsp;&nbsp;}}
| {{tlx|نسبة تباين الألوان|#000000|#FFFFFF}}
| style="text-align: right;" | {{#expr: {{نسبة تباين الألوان|#000000|#FFFFFF}} round3}}
| AAA
|-
| {{Color sample|#000080}} #000080
| {{Color sample|#DDDDDD}} #DDDDDD
| {{لون النص|#000080|#DDDDDD|&nbsp;&nbsp;Sample&nbsp;&nbsp;}}
| {{tlx|نسبة تباين الألوان|#000080|#DDDDDD}}
| style="text-align: right;" | {{#expr: {{نسبة تباين الألوان|#000080|#DDDDDD}} round3}}
| AAA
|-
| {{Color sample|#7B0000}} #7B0000
| {{Color sample|#FF9900}} #FF9900
| {{لون النص|#7B0000|#FF9900|&nbsp;&nbsp;Sample&nbsp;&nbsp;}}
| {{tlx|نسبة تباين الألوان|#7B0000|#FF9900}}
| style="text-align: right;" | {{#expr: {{نسبة تباين الألوان|#7B0000|#FF9900}} round3}}
| AA
|-
| {{Color sample|#004800}} #004800
| {{Color sample|#AAAAAA}} #AAAAAA
| {{لون النص|#004800|#AAAAAA|&nbsp;&nbsp;Sample&nbsp;&nbsp;}}
| {{tlx|نسبة تباين الألوان|#004800|#AAAAAA}}
| style="text-align: right;" | {{#expr: {{نسبة تباين الألوان|#004800|#AAAAAA}} round3}}
| AA
|-
| {{Color sample|red}} red
| {{Color sample|white}} white
| {{لون النص|red|white|&nbsp;&nbsp;Sample&nbsp;&nbsp;}}
| {{tlx|نسبة تباين الألوان|red|white}}
| style="text-align: right;" | {{#expr: {{نسبة تباين الألوان|red|white}} round3}}
| {{كلا}}
|-
| {{Color sample|#FF0000}} #FF0000
| {{Color sample|#FF9999}} #FF9999
| {{لون النص|#FF0000|#FF9999|&nbsp;&nbsp;Sample&nbsp;&nbsp;}}
| {{tlx|نسبة تباين الألوان|#FF0000|#FF9999}}
| style="text-align: right;" | {{#expr: {{نسبة تباين الألوان|#FF0000|#FF9999}} round3}}
| {{كلا}}
|}

=== Examples with dark background ===
{| class="wikitable"
|-
! لون<BR>النص !! لون<BR>الخلفية !! نموذج !! الكود !! نسبة<BR>التباين !! [[إرشادات إتاحة محتوى الويب]]<BR>conf.
|-
| {{Color sample|#BADFEE}} #BADFEE
| {{Color sample|black}} black
| {{لون النص|#BADFEE|black|&nbsp;&nbsp;Sample&nbsp;&nbsp;}}
| {{tlx|نسبة تباين الألوان|#BaDFeE|BlAcK}}
| style="text-align: right;" | {{#expr: {{نسبة تباين الألوان|#BaDFeE|BlAcK}} round3}}
| AAA
|-
| {{Color sample|red}} red
| {{Color sample|black}} black
| {{لون النص|red|black|&nbsp;&nbsp;Sample&nbsp;&nbsp;}}
| {{tlx|نسبة تباين الألوان|red|black}}
| style="text-align: right;" | {{#expr: {{نسبة تباين الألوان|red|black}} round3}}
| AA
|-
| {{Color sample|#FFFF00}} #FFFF00
| {{Color sample|#00FFFF}} #00FFFF
| {{لون النص|#FFFF00|#00FFFF|&nbsp;&nbsp;Sample&nbsp;&nbsp;}}
| {{tlx|نسبة تباين الألوان|#FFFF00|#00FFFF}}
| style="text-align: right;" | {{#expr: {{نسبة تباين الألوان|#FFFF00|#00FFFF}} round3}}
| {{كلا}}
|}

== WCAG 2.0 ==
كدليل لاختيار ألوان المقدمة والخلفية للنص، تصنف [http://www.w3.org/TR/WCAG20/#visual-audio-contrast إرشادات الوصول إلى محتوى الويب 2.0 (المبدأ التوجيهي 1.4)] نسب التباين للنص العادي على النحو التالي:

{| 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 bold)
| < 3.0
| 3.0 إلى 4.5
| > 4.5
|}
يتم عرض نص ويكي العادي بواسطة المتصفحات الشائعة بمعدل تقريبي 9.5 إلى 10.5&nbsp;pt (12.5 إلى 14&nbsp;px), اعتمادا على الجلد. يجب أن يكون النص غامقًا بنسبة 180% أو 140% تقريبًا حتى يصبح "كبيرًا" لأغراض [http://www.w3.org/TR/WCAG20/#larger-scaledef WCAG].
== انظر أيضًا ==
* [[قالب:Color contrast conformance]]
* [http://snook.ca/technical/colour_contrast/colour.html فحص تباين الألوان]
* [http://www.w3.org/TR/2012/NOTE-WCAG20-TECHS-20120103/G18 G18: التأكد من وجود نسبة تباين لا تقل عن 4.5:1 بين النص (وصور النص) والخلفية خلف النص]
* [http://trace.wisc.edu/contrast-ratio-examples/ فهرس عينات تباين الألوان]
<includeonly>
<!-- التصانيف هنا، ووصلات الانترويكي في ويكي بيانات  -->
{{ملعب آخر||}}
</includeonly>