فاحص تباين الألوان: أسئلة وشروح
كل شرح هنا يجيب عن سؤال واحد بمثال عملي، ثم يوصلك إلى الأداة لتجربه بنفسك. عدد الشروح: 11.
الأسئلة
- تباين الألوان وقراءة النصكيف تتحقق من أن لون النص مقروء فوق لون الخلفية بنسبة التباين في WCAG، وما معنى 4.5:1، ولماذا يرسب لونان متقاربان جدًا في النظر.
- لون علامتي التجارية البرتقالي لا ينجح كلون نص على الخلفية البيضاء، كيف أجد أقرب درجة منه تنجح دون أن أغيّر الهوية؟برتقالي الهوية #F7A21B يعطي 2.07:1 فقط على الأبيض. هكذا تجد أقرب درجة منه تبلغ 4.5:1 للنص، وتحتفظ باللون الأصلي للأشكال والخلفيات.
- زر «أضف إلى السلة» في متجري بلون أحمر برتقالي، هل أكتب عليه بالأبيض أم بالأسود؟على الزر #E4572E يعطي الأبيض 3.68:1 فقط بينما يعطي الأسود 5.70:1. افحص الاحتمالين، وإن أردت الأبيض فاعرف كم تحتاج أن تغمّق لون الزر.
- العنوان الكبير في صفحتي ينجح في الفحص والنص العادي بنفس اللون يفشل، ما الذي يعدّ نصًا كبيرًا، وهل يختلف الأمر مع الخطوط العربية؟الرمادي #8A8A8A يعطي 3.45:1 على الأبيض: ينجح للعناوين الكبيرة ويفشل للنص العادي. ما حدود النص الكبير، ولماذا تحتاج الخطوط العربية الصغيرة هامشًا إضافيًا.
- حدود خانات الإدخال في نموذج الطلب رمادية فاتحة جدًا، كيف أتحقق أنها واضحة بما يكفي؟حدود الخانات بالرمادي #E0E0E0 تعطي 1.32:1 فقط على الأبيض. تعرّف على فحص عناصر الواجهة 3:1، وكيف تجد أفتح رمادي ينجح، ولماذا تهمّ خلفية الصفحة.
- سعر التخفيض عندي بالأحمر الفاقع على خلفية بيضاء ويبدو واضحًا جدًا، فلماذا يفشل في فحص التباين؟الأحمر #FF0000 على الأبيض يعطي 4.00:1 ويفشل للنص العادي، لأن التباين يقيس السطوع لا الحيوية. أحمر أعمق مثل #D32F2F يعطي 4.98:1 ويبقى لون عرض.
- سمعت عن طريقة APCA لقياس التباين، هل أعتمدها بدل نسبة WCAG 2 التي تحسبها الأداة؟الأداة تحسب نسبة WCAG 2 التي تعتمدها الإرشادات المنشورة حاليًا لحدود النجاح. أما APCA فطريقة مختلفة ليست جزءًا من WCAG 2 وقد تقيّم بعض الأزواج بشكل آخر.
- أضفت وضعًا داكنًا لموقعي، أي درجات الرمادي ولون الهوية أستخدم للنص على الخلفية الداكنة؟لون الهوية #0F6B5F يعطي 6.39:1 على الأبيض و2.93:1 فقط على #121212. أعد فحص كل لون نص في الوضع الداكن، واحصل على درجة أفتح من لونك تنجح هناك.
- اللون الرمادي نفسه نجح على الخلفية البيضاء وفشل على خلفية متجري البيج، لماذا؟#767676 يعطي 4.54:1 على الأبيض و4.00:1 فقط على البيج #F5F0E6. النسبة تعتمد على اللونين معًا، فافحص النص على لون خلفيتك الحقيقي لا على الأبيض.
- عملاء قالوا إن النص الإرشادي داخل خانات نموذج الطلب باهت ولا يُقرأ، كيف أختار لونًا مناسبًا له؟النص الإرشادي #A9A9A9 يعطي 2.35:1 فقط على الأبيض. هو نص ويحتاج 4.5:1 مثل غيره. هكذا تجد أقرب رمادي ينجح، ولماذا يغيّر لون خلفية الخانة النتيجة.
- أكتب عبارة العرض بالأبيض فوق صورة بانر، والأداة لا تفحص الصور، فكيف أتأكد أن النص مقروء؟الأداة تقارن لونين مصمتين فقط، فالتقط أفتح نقطة خلف النص وافحص الأبيض عليها. إن فشل، أضف شريطًا داكنًا وافحص الأبيض على لونه الناتج.