الواجهة الداكنة: كيف تجعل النص مقروءًا
1. ابدأ بنص مقروء وترتيب واضح
الأبيض النقي على الأسود يحمل تباينًا قويًا، لكن الراحة تختلف باختلاف الشخص والشاشة والإضاءة. والخلفية الزرقاء الداكنة أو الرمادية قد تؤدي الغرض جيدًا أيضًا. اختر الألوان بفحص سهولة القراءة، لا بافتراض أن الوضع الداكن مريح للجميع.
2. تحقق من التباين، لا تخمّن
استهدف تباينًا لا يقل عن 4.5:1 لنصوص المتن، و3:1 للنصوص الكبيرة، كما توصي إرشادات WCAG. والنصوص الثانوية — التسميات التوضيحية والنصوص الإرشادية والعناوين المعطّلة — هي حيث تفشل التصاميم الداكنة غالبًا، لأن الرمادي على الرمادي الداكن يبدو خفيفًا رقيقًا في ملف التصميم وغير قابل للقراءة في الحياة الواقعية.
- استخدم أداة فحص تباين لكل زوج من النص والخلفية.
- احتفظ بمجموعة صغيرة ثابتة من ألوان النص بدل درجات رمادية مرتجلة لكل حالة.
- اجعل الروابط والأزرار قابلة للتمييز دون الاعتماد على اللون وحده.
3. اللون واللمسات والعمق
تبدو الألوان المشبعة أكثر حدة على الخلفيات الداكنة، فخفّف اللمسات اللونية قليلًا. والظلال بالكاد تظهر على الداكن، فاستخدم أسطحًا أفتح قليلًا لإظهار ما يعلو ماذا. كما تساعد حدود رفيعة بعتامة منخفضة على فصل البطاقات دون إضافة ضجيج بصري.
4. اختبرها على شاشات حقيقية
اعرض التصميم على هاتف في الهواء الطلق، وعلى شاشة رخيصة، وفي غرفة معتمة. واطلب من شخص ضعيف البصر أن يقرأ صفحة. فالمشاكل التي لا تظهر أبدًا على شاشتك أنت تظهر سريعًا بهذه الطريقة.
الخلفية نفسها، ونص مختلف
مهمتك التالية تبدأ الساعة 14:30.
تباين ضعيف 2.58:1 — لا يحقق الحد الأدنى 4.5:1 للنص العادي.
مهمتك التالية تبدأ الساعة 14:30.
تباين مقروء 13.73:1 — يحقق الحد الأدنى للنص العادي.
الخلفية: #102044. والنص: #52627a و#e8eef8. هذه النسب خاصة بهذه الألوان الصلبة، والشفافية أو التدرجات تغيّر النتيجة.
إرشادات W3C للتباين تحدد 4.5:1 للنص العادي و3:1 للنص الكبير. والتباين فحص واحد، لا مراجعة كاملة لسهولة الوصول.
5. أسئلة يطرحها الناس
هل يجب أن يوفر كل موقع وضعًا داكنًا؟
ليس بالضرورة. يستحق ذلك حين يستخدم الناس المنتج لفترات طويلة أو في إضاءة خافتة، مثل لوحات المعلومات. وفي غير ذلك يكفي مظهر فاتح جيد.
هل الأسود النقي مقبول أحيانًا؟
أحيانًا. على هواتف OLED قد يوفّر البطارية. فقط تجنّب وضع نص أبيض ساطع فوقه مباشرة.
تريد أن تتحدث عن مشروعك؟
صِف فكرتك في رسائل قليلة — وستحصل على إجابة واضحة وعرض سعر ثابت.