MyCalCute
تثبيت
العلوم

تباين الألوان: لماذا قد تفشل نسبة تظهر بعد التقريب ٤٫٥؟

افهم تباين نصوص sRGB، وقارن النسب قبل التقريب، وميّز فحص لونين عن إتاحة واجهة كاملة.

الطريقة

يقيس التباين الفرق في الإضاءة النسبية بين النص وخلفيته الفعلية. ابدأ باللونين اللذين يظهران داخل الشارة وخلفها، لا بلون لوحة النتائج المحيطة بها. قد يصبح النص الباهت داخل شارة فاتحة غير مقروء رغم وجود لوحة داكنة حولها.

للألوان المعتمة في فضاء sRGB، تُطبَّع قنوات الأحمر والأخضر والأزرق ثم تُحوَّل إلى قيم خطية لحساب الإضاءة النسبية. اقسم إضاءة اللون الأفتح مضافاً إليها ٠٫٠٥ على إضاءة الأغمق مضافاً إليها ٠٫٠٥. يعطي الأسود على الأبيض ٢١:١، ويعطي اللونان المتطابقان ١:١.

درجتان رماديتان حول الحدمثال حدودي مفيد هو الرمادي على الأبيض: يعطي RGB 119,119,119 نحو ٤٫٤٧٨٠٨٩:١، ويعطي RGB 118,118,118 نحو ٤٫٥٤٢٢٢٥:١. قد يظهر الاثنان ٤٫٥ عند التقريب إلى منزلة واحدة، لكن الثاني وحده يبلغ حد AA للنص العادي وهو ٤٫٥:١. اعتمد النسبة قبل التقريب.درجتان رماديتان حول الحدRGB 119,119,1194.4781 :1RGB 118,118,1184.5422 :1MyCalCute.com
درجتان رماديتان حول الحد

مثال حدودي مفيد هو الرمادي على الأبيض: يعطي RGB 119,119,119 نحو ٤٫٤٧٨٠٨٩:١، ويعطي RGB 118,118,118 نحو ٤٫٥٤٢٢٢٥:١. قد يظهر الاثنان ٤٫٥ عند التقريب إلى منزلة واحدة، لكن الثاني وحده يبلغ حد AA للنص العادي وهو ٤٫٥:١. اعتمد النسبة قبل التقريب.

عرض البيانات
RGB 119,119,119
4.478089 :1 4.478089… < 4.5
RGB 118,118,118
4.542225 :1 4.542224… > 4.5

مثال محلول

مثال حدودي مفيد هو الرمادي على الأبيض: يعطي RGB 119,119,119 نحو ٤٫٤٧٨٠٨٩:١، ويعطي RGB 118,118,118 نحو ٤٫٥٤٢٢٢٥:١. قد يظهر الاثنان ٤٫٥ عند التقريب إلى منزلة واحدة، لكن الثاني وحده يبلغ حد AA للنص العادي وهو ٤٫٥:١. اعتمد النسبة قبل التقريب.

يبلغ حد AA للنص الكبير المؤهل ٣:١، ويجب أن يستوفي حجم الخط ووزنه تعريف الإرشادات؛ اتساع الشارة لا يجعل نصها كبيراً. وللنص العادي يبلغ حد AAA نسبة ٧:١. حدد فئة النص المقصودة قبل تفسير اجتياز الفحص أو عدم اجتيازه.

⁦L = 0.2126 R + 0.7152 G + 0.0722 B (linear sRGB)⁩

⁦contrast = (lighter L + 0.05) / (darker L + 0.05)⁩

⁦RGB(119,119,119) on white ≈ 4.478089 : 1⁩

⁦RGB(118,118,118) on white ≈ 4.542225 : 1⁩

مثال للرمادي على الأبيضلا تشهد نتيجة لونين بإتاحة الصفحة كاملة. افحص حالات المرور والتركيز والخطأ والتعطيل، والمظهرين الفاتح والداكن، والشفافية والتدرجات والصور الخلفية. راجع أيضاً حجم النص والتنقل بلوحة المفاتيح والعناصر غير النصية، واستخدم تسميات واضحة كيلا يكون اللون وحده ناقلاً للمعنى. رسم توضيحي؛ ليس بمقياس رسم.مثال للرمادي على الأبيضAa0123456789RGB 119,119,119#777777RGB 255,255,255#FFFFFFالنتيجة4.478089 : 1MyCalCute.com
مثال للرمادي على الأبيض

لا تشهد نتيجة لونين بإتاحة الصفحة كاملة. افحص حالات المرور والتركيز والخطأ والتعطيل، والمظهرين الفاتح والداكن، والشفافية والتدرجات والصور الخلفية. راجع أيضاً حجم النص والتنقل بلوحة المفاتيح والعناصر غير النصية، واستخدم تسميات واضحة كيلا يكون اللون وحده ناقلاً للمعنى.

عرض البيانات
RGB 119,119,119
#777777
RGB 255,255,255
#FFFFFF
النتيجة
4.478089 : 1

الفحوص والحدود

لا تشهد نتيجة لونين بإتاحة الصفحة كاملة. افحص حالات المرور والتركيز والخطأ والتعطيل، والمظهرين الفاتح والداكن، والشفافية والتدرجات والصور الخلفية. راجع أيضاً حجم النص والتنقل بلوحة المفاتيح والعناصر غير النصية، واستخدم تسميات واضحة كيلا يكون اللون وحده ناقلاً للمعنى.

حاسبات ذات صلة

المصدر: W3C WAI — Understanding Contrast Minimum