تصميم الوضع الداكن بشكل صحيح

01الوضع الداكن ليس عكسًا

عكس كل الألوان ينتج نتائج قاتمة وقاسية. يُصمَّم الوضع الداكن الجيد وفق منطقه الخاص: للأسطح والنصوص والألوان المميزة والصور قيم مقصودة. ويختار كثيرون الوضع الداكن لراحة العين في الإضاءة الخافتة، لذلك الهدف شاشة هادئة ومقروءة.

02أسطح ونصوص ناعمة

• تجنّب الخلفيات السوداء الصرفة. الرمادي الداكن جدًا، مثل #121212، أنعم على العين ويترك مجالًا لإظهار العمق.
• تجنّب النص الأبيض الصرف. الأبيض المائل للرمادي، مثل #ececec، يخفف الوهج على الأسطح الداكنة.
• أظهر الارتفاع بأسطح أفتح. يصعب رؤية الظلال على الخلفيات الداكنة، لذلك تستخدم الطبقات المرتفعة مثل البطاقات والنوافذ تعبئة أفتح قليلًا.

يحافظ سلّم ارتفاع بسيط على اتساق الطبقات: خلفية الصفحة هي الأغمق، وتأتي البطاقات بدرجة أفتح، ثم القوائم أو النوافذ بدرجة أفتح أخرى. اجعل السلّم من ثلاثة مستويات أو أربعة ليبقى كل مستوى مميزًا.

03الألوان المميزة والتباين والصور والأخطاء

الألوان المميزة المشبعة التي تبدو جيدة على الأبيض قد تبدو مهتزة على الأسطح الداكنة. فاتحها أو خفّف تشبعها قليلًا. ثم أعد فحص التباين: ما زال النص العادي يحتاج إلى 4.5:1 ومكوّنات الواجهة إلى 3:1 وفق WCAG، والنجاح في الوضع الفاتح لا يثبت شيئًا عن الوضع الداكن.

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

تفشل السمات الداكنة عادة في مواضع يمكن توقعها. تحقق منها قبل الإطلاق:

• النص الرمادي الرفيع على سطح داكن يهبط غالبًا دون 4.5:1. قِسه.
• قد تختفي الحدود التي كانت ظاهرة على الأبيض. استخدم لون حدود أفتح قليلًا.
• تبقى الألوان المكتوبة مباشرة داخل المكوّنات فاتحة عند تغيّر السمة. استبدلها برموز.
• قد تبدو المساحات الكبيرة البيضاء الساطعة، مثل مستند مضمّن، مزعجة للعين في السمة الداكنة.

اختبر الوضع الداكن في غرفة خافتة وعلى شاشة ساطعة، بمحتوى حقيقي.

04التنفيذ بالرموز واختيار المستخدم

ابنِ السمتين على رموز ألوان دلالية، فلا تحتوي المكوّنات على قيم ألوان مباشرة. احترم إعداد النظام عبر استعلام <code>;prefers-color-scheme<;/code>;، وقدّم أيضًا مفتاحًا يدويًا، لأن بعض الناس يريدون سمة تختلف عن سمة جهازهم.

1. عرّف قيمًا داكنة لكل رمز دلالي.
2. استخدم تعبئات أفتح للطبقات الأعلى.
3. عدّل الألوان المميزة وأعد قياس التباين.
4. راجع الصور والشعارات والرسوم.
5. أضف مفتاحًا يدويًا واحفظ الاختيار.

وثّق القيم الداكنة بجانب الفاتحة في نظام التصميم. فجدول يضم كل رمز وقيمته الفاتحة وقيمته الداكنة ونسبة التباين المقيسة يمنح المطورين والمراجعين مكانًا واحدًا للتحقق.

05المصادر

• MDN Web Docs. prefers-color-scheme. https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
• W3C. Web Content Accessibility Guidelines (WCAG) 2.2. https://www.w3.org/TR/WCAG22/