الوضع الداكن: غيّر الألوان وحافظ على المعنى

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

ابدأ بأدوار اللون

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

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

قِس التباين في السياق الفعلي

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

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

احترم التفضيل واترك خيارًا واضحًا

تتيح ميزة CSS المسماة prefers-color-scheme اكتشاف تفضيل المستخدم للنمط الفاتح أو الداكن من إعداد النظام أو المتصفح. يمكن للفريق الاستفادة منها كنقطة بداية، مع تقديم اختيار واضح داخل المنتج لمن يريد نمطًا مختلفًا.

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

اختبر الحالات الأقل ظهورًا

لا تكتفِ بالشاشة الرئيسية النظيفة. كوّن مجموعة مراجعة تضم جدولًا كثيفًا، وقائمة مفتوحة، ورسالة خطأ، وحقلًا في بؤرة التركيز، وحالة فارغة. راجع الرموز والصور أيضًا؛ فقد تبدو أصول أُعدت لخلفية فاتحة محاطة بمستطيل مزعج في النمط الداكن.

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

خطوتك التالية

عامل الوضع الداكن كنمط له قيمه المدروسة داخل النظام نفسه. ابدأ بأدوار اللون، ثم افحص التباين والاختيار وحالات الاستخدام؛ بذلك تحافظ على معنى الواجهة قبل الحكم على جمالها.