تصميم قوائم الطعام للمطاعم ذات الإضاءة الخافتة: قاعدة 7:1

بار ويسكي بـ18 طاولة في إتيلر بإسطنبول لاحظ أن الزبائن يشغّلون مصباح الهاتف لقراءة القائمة على ضوء الشموع. الحل لم يكن زيادة الإضاءة بل رفع تباين القائمة من 4.5:1 إلى 7:1.

WCAG 2.2 AA مقابل توصية AAA

تتطلب WCAG 2.2 AA تباينًا 4.5:1 للنص العادي، لكنها مُعتمدة عند 200-500 لوكس إضاءة مكتب. المطاعم المسائية تعمل عند 20-50 لوكس.

للأماكن المسائية، ابدأ من نسبة AAA البالغة 7:1. الأبيض النقي على الأسود النقي يعطي 21:1 لكنه يسبّب هالات؛ الأمثل #F5F5F5 على #0A0A0A (~18:1).

الطباعة وسماكة الخط

الأوزان النحيلة (100-300) تختفي في الضوء الخافت. استخدم خطوطًا حديثة بوزن 500-600 وحجم 16 بكسل على الأقل.

• النص: 17-18 بكسل، وزن 500
• اسم المنتج: 19-20 بكسل، وزن 600
• السعر: 16 بكسل، أرقام جدولية

الوضع الداكن التلقائي

قوائم QR الحديثة تقرأ prefers-color-scheme لتبني سمة النظام. iOS يتحوّل عند الغروب دون زر.

بيانات إتيلر: بعد الوضع الداكن + التباين 7:1، انخفضت شكاوى "غير مقروء" بنسبة 82% وارتفعت مبيعات المشروبات المسائية بنسبة 19%.

الأسئلة الشائعة

كيف أقيس 7:1؟ WebAIM Contrast Checker أو Lighthouse في Chrome يحسبان تلقائيًا.

هل العناوين الملوّنة تكسر التباين؟ نعم — استخدم ألوان العلامة للزخرفة فقط واترك نص القائمة أبيض نقي.

هل نحتاج زر يدوي للوضع الداكن؟ لا — احترام سمة النظام كافٍ.

هل وجدت هذا مفيداً؟ شاركه.