حدود خانات الإدخال في نموذج الطلب رمادية فاتحة جدًا، كيف أتحقق أنها واضحة بما يكفي؟
حدود خانات الإدخال والأزرار والأيقونات يشملها معيار «تباين غير النص»، ويطلب 3:1 على الأقل مع اللون المجاور. اكتب لون الحد في حقل «لون النص» ولون الصفحة في «لون الخلفية»، واقرأ سطر «عناصر الواجهة والرسوم». الرمادي #E0E0E0 على الأبيض يعطي 1.32:1 ويفشل، و#949494 يعطي 3.03:1 وينجح.
لماذا لا ينطبق عليها حد 4.5:1؟
حد 4.5:1 للنص المكتوب. أما حدود الخانة فليست نصًا، بل هي ما يخبر العميل أين يضغط ليكتب اسمه ورقم جواله وعنوانه. لهذا وضعت WCAG 2.1 معيارًا منفصلًا هو 1.4.11، ويطلب 3:1 لأجزاء الواجهة اللازمة لاستخدام الصفحة: حدود الخانات، وإطار الزر إن كان هو ما يميزه، والأيقونات التي تحمل معنى، ومربعات الاختيار، وحلقة التركيز التي تظهر عند التنقل بلوحة المفاتيح.
في نماذج الطلب الأنيقة كثيرًا ما تكون الخانة بيضاء على صفحة بيضاء، وحدها هو الشيء الوحيد الذي يرسم مكانها. فإن كان الحد باهتًا جدًا، يرى العميل عناوين الحقول ولا يرى الخانات.
كيف تفحص الحد في الأداة
- التقط لون الحد الدقيق من إعدادات القالب، أو من لقطة شاشة للنموذج عبر منتقي الألوان من الصور.
- افتح فاحص تباين الألوان واكتب لون الحد في «لون النص». التسمية لا تهم هنا، فالحقل يقبل أي لون.
- اكتب في «لون الخلفية» اللون الملاصق للحد من الخارج، أي لون الصفحة أو البطاقة التي يقع عليها النموذج.
- تجاهل أسطر النص، واقرأ سطر «عناصر الواجهة والرسوم (المطلوب 3:1)».
نتائج من ثلاث درجات رمادي شائعة
- #E0E0E0 على الأبيض: 1.32:1، غير ناجح. هذا هو الرمادي الفاتح المعتاد في كثير من القوالب.
- #CCCCCC على الأبيض: 1.61:1، غير ناجح أيضًا، رغم أنه يبدو أوضح.
- #949494 على الأبيض: 3.03:1، ناجح في عناصر الواجهة.
للوصول إلى الدرجة الناجحة دون تجريب يدوي، اختر في قسم الاقتراحات الهدف «3:1 (AA للنص الكبير وعناصر الواجهة)». من #E0E0E0 أو من #CCCCCC ستقترح الأداة الدرجة نفسها #949494 بنسبة 3.03:1، لأنها أول نقطة على الطريق نحو الأسود تبلغ الهدف.
انتبه للون الذي يجاور الحد فعلًا
المعيار يقارن بالألوان المجاورة، لا بالأبيض دائمًا. إن وضعت النموذج على بطاقة رمادية فاتحة مثل #F5F5F5، فإن #949494 نفسه يعطي 2.78:1 ويفشل. افحص كل حد مقابل ما يلامسه في تصميمك الحقيقي. وإن كانت الخانة لها خلفية ملونة تميزها بوضوح عن الصفحة، فالمهم عندها هو تباين تلك الخلفية مع ما حولها، فافحصه بالطريقة نفسها.
ولا تنسَ حلقة التركيز: كثير من القوالب تلغيها أو تجعلها بلون فاتح جدًا، وهي ما يعتمد عليه من يتنقل بين الخانات بلوحة المفاتيح. اجتياز 3:1 يعني أن الحد مرئي بمقياس اللون، ولا يعني أن النموذج كله سهل الاستخدام أو مطابق لمتطلبات الوصول.
أسئلة شائعة
هل يجب أن تنجح حدود كل الخانات في 4.5:1؟
لا. الحدود ليست نصًا، والمطلوب لها 3:1. لكن النص الذي يكتبه العميل داخل الخانة يحتاج 4.5:1 مع خلفية الخانة.
هل الأيقونات الزخرفية مشمولة؟
المعيار يخص ما يلزم لفهم الصفحة أو استخدامها. أيقونة سلة التسوق التي تعمل زرًا مشمولة، والزخرفة البحتة ليست كذلك.
حد خانتي بعرض 1 بكسل، هل يكفي أن ينجح اللون؟
الأداة تفحص اللون فقط، ولا تعرف سمك الخط. الحد الرفيع جدًا قد يصعب رؤيته حتى مع لون ناجح، فانظر إليه على جوال حقيقي.