اللون المتقدم: اللوحات والوضع الداكن والإتاحة الكاملة

حين تلتقي اللوحة بالعالم الحقيقي

تسقط ملاحظتان في الصباح نفسه لدى Studio Mango. الأولى من مختبِر تجريبي لـSereno: «أنا مصاب بعمى الألوان، ولا أرى الفرق بين رسائل النجاح ورسائل الخطأ لديكم.» والثانية من العميل: «مستخدمو تطبيقي يتأملون مساءً — نحتاج وضعاً داكناً.» طلبان مختلفان ودرس واحد: لوحة الفصل الثاني، المثالية في الظروف النموذجية، عليها الآن مواجهة التنوع الحقيقي للعيون وسياقات الاستخدام.

يستكمل هذا الفصل عدّتك اللونية على أربع جبهات: توسيع كل لون إلى سلّم درجات (لأن ثمانية ألوان لا تكفي طويلاً أبداً)، والتفكير بـالإضاءة المُدرَكة مع OKLCH، وبناء وضع داكن جدير بالاسم، ودفع الإتاحة إلى ما بعد تباين النص — عمى الألوان، والعناصر غير النصية، والحالات الدلالية. في النهاية، لن تسلّم لوحة بعد الآن: ستسلّم سمة (theme) كاملة.

من الألوان إلى سلالم الدرجات

الـtoken الخاص بك --color-primary درجة وحيدة. لكن ما إن تكبر الواجهة حتى تحتاج جاراتها: نسخة فاتحة جداً لخلفية شريط، ونسخة داكنة للمرور، ونسخة شبه سوداء لنص على خلفية فاتحة. بدل ارتجال هذه المتغيرات حالةً حالة، تُعرّف أنظمة التصميم الاحترافية سلّماً من 9 إلى 11 درجة لكل لون، مرقّمة من 50 (الأفتح) إلى 900 (الأدكن).

لكل رقم دور اصطلاحي: 50-100 للخلفيات الملوّنة الخفية، و200-300 للحدود والحالات المعطَّلة، و500 كلون أساس، و600-700 للمرور والحالات النشطة، و800-900 لنص اللون على خلفية فاتحة. هذا الاصطلاح يجعل القرارات سريعة ومتسقة: «شريط المعلومات يستخدم sage-50 خلفيةً وsage-800 نصاً» تُفهم فوراً، والتباين شبه مضمون بالبناء — طرفا سلّم متقَن يجتازان AA فيما بينهما.

:root {
  /* سلّم sage — مولَّد بإضاءة مُدرَكة منتظمة */
  --sage-50:  #F2F6F4;   /* خلفيات ملوّنة خفية */
  --sage-100: #E1EAE6;
  --sage-200: #C4D5CE;   /* حدود وفواصل */
  --sage-300: #A3BDB3;
  --sage-400: #7E9D91;
  --sage-500: #4A7C6F;   /* الأساس: أزرار وروابط */
  --sage-600: #3D685D;   /* المرور */
  --sage-700: #32554C;   /* النشط */
  --sage-800: #27423B;   /* نص ملوّن على خلفية فاتحة */
  --sage-900: #1C302B;
}

/* الأدوار تشير إلى السلّم — وأبداً ليس العكس */
:root {
  --color-primary: var(--sage-500);
  --color-primary-hover: var(--sage-600);
  --color-primary-surface: var(--sage-50);
}

لاحظ البنية ذات الطابقين في الكود أعلاه: السلّم الخام (--sage-500) من جهة، والأدوار الوظيفية (--color-primary) من جهة أخرى، والأدوار تشير إلى السلّم. هذا التوسيط هو مفتاح الوضع الداكن الآتي أدناه: ستغيّر ما تشير إليه الأدوار، دون لمس السلّم ولا المكوّنات.

OKLCH: التفكير بالإضاءة المُدرَكة

لتوليد هذه السلالم، صيغة اللون أهم مما يُظن. لصيغة HSL الكلاسيكية عيب معروف: «إضاءتها» تكذب. أصفر وأزرق عند 50% من إضاءة HSL لا يملكان البتة الوضوح نفسه الذي تدركه العين — يبدو الأصفر متوهجاً والأزرق داكناً. النتيجة: سلّم مولَّد بـHSL درجاته غير منتظمة، ونسب التباين تصبح متعذرة التنبؤ من لون إلى آخر.

الصيغة الحديثة OKLCH تصحح ذلك: محورها L يقيس الإضاءة كما تدركها العين. لونان بـOKLCH لهما L نفسها يبدوان فعلاً بالوضوح نفسه أياً كانت الدرجة. وبالنسبة إليك، إنها قوة خارقة عملية: اطلب سلالمك «بـOKLCH وبخطوة إضاءة منتظمة»، وستحصل كل درجاتك (sage، الخوخي، أحمر الخطأ) على ظلال متراصفة — درجة 600 من الأخضر ودرجة 600 من الأحمر ستقدمان التباين نفسه على خلفية بيضاء.

وسّع نظام تصميم Sereno إلى سلالم درجات كاملة:
- لكل لون أساس (sage #4A7C6F، الخوخي #E8A87C، أحمر الخطأ #B5544D)، ولّد سلّماً من 10 درجات (50 إلى 900) بـOKLCH وبخطوة إضاءة مُدرَكة منتظمة
- حافظ على الدرجة وعدّل خصوصاً الإضاءة والـchroma: الظلال الفاتحة أقل تشبعاً قليلاً، والداكنة أكثر تشبعاً قليلاً
- أعطِ لكل ظل: قيمة oklch()، والبديل hex، ونسبة التباين على الأبيض وعلى #1A1F1D
- اختم بجدول التركيبات المضمونة AA: أي رقم نص على أي رقم خلفية
الصيغة: كتلة :root CSS معلَّقة.

الوضع الداكن ليس صورة سلبية

أول حدس يجب قتله: الوضع الداكن ليس عكس اللوحة الفاتحة. العكس يُنتج خلفية سوداء خالصة (#000) تجعل النص الأبيض يهتز، وألواناً مشبعة تصبح فسفورية، وظلالاً غير مرئية. السمة الداكنة الجيدة تقوم على أربعة مبادئ. أولاً: خلفية رمادية داكنة جداً مصبوغة (لـSereno، رمادي-أخضر عميق مثل #141816)، وأبداً لا أسود خالصاً. ثانياً: ألوان أقل تشبعاً — على خلفية داكنة، التشبع نفسه يبدو أكثر صراخاً، فننزل بالـchroma درجة.

ثالثاً: الارتفاع بالوضوح. في الوضع الفاتح تتمايز البطاقة بظلها؛ وفي الداكن لم تعد الظلال تُرى — السطح نفسه هو الذي يفتح قليلاً (البطاقة أفتح قليلاً من الخلفية، والنافذة المنبثقة أفتح بعدُ). رابعاً: الأبيض المائل بدل الأبيض الخالص (#E8ECEA بدل #FFFFFF)، لتخفيف الاهتزاز في القراءات الليلية الطويلة — وهو تحديداً سياق استخدام Sereno.

وهنا تؤتي بنيتك ذات الطابقين ثمارها: لإنشاء السمة الداكنة، لا تلمس المكوّنات ولا السلّم — بل تعيد إعلان الأدوار فقط داخل كتلة prefers-color-scheme: dark. يشير --color-surface الآن إلى الرمادي العميق، و--color-primary إلى sage-400 أفتح (لأن النسخة الفاتحة من اللون هي التي تتباين على خلفية داكنة). ثلاثون سطر CSS، وتنقلب الواجهة كلها.

/* الوضع الداكن: نعيد إعلان الأدوار، لا شيء آخر */
@media (prefers-color-scheme: dark) {
  :root {
    --color-surface: #141816;          /* رمادي-أخضر عميق، لا أسود خالص */
    --color-surface-raised: #1E2421;   /* الارتفاع بالوضوح */
    --color-text: #E8ECEA;             /* أبيض مائل، لا أبيض خالص */
    --color-text-muted: #9DABA5;       /* مُعاد التحقق: 5.2:1 على السطح */
    --color-primary: var(--sage-400);  /* النسخة الفاتحة من اللون */
    --color-primary-hover: var(--sage-300);
    --color-primary-surface: #20302B;
    --shadow-soft: none;               /* الارتفاع يحلّ محلّ الظل */
    --shadow-raised: none;
  }
}

ولّد السمة الداكنة الكاملة لـSereno انطلاقاً من tokens الفاتحة (أدناه):
[الصق هنا كتلة :root + سلالمك]
القواعد:
- أعد إعلان الأدوار فقط داخل @media (prefers-color-scheme: dark)، دون لمس السلالم ولا المكوّنات
- خلفية رمادية-خضراء عميقة (لا أسود خالصاً)، نص أبيض مائل (لا #FFF)
- خفّف تشبع ألوان التمييز قليلاً، واستخدم الظلال الفاتحة من السلالم لـprimary
- استبدل بالظلال الارتفاعَ: surface-raised أفتح من surface
- أعطِ نسبة التباين لكل تركيبة نص/خلفية في السمة الداكنة
- أشر إلى أي تركيبة دون 4.5:1 واقترح التصحيح

عمى الألوان: لا تشفّر المعلومة باللون وحده أبداً

لنعد إلى المختبِر التجريبي. نحو 8% من الرجال و0.5% من النساء يدركون بعض الألوان بشكل سيئ — وغالباً التمييز أحمر/أخضر، وهو بالضبط الثنائي الذي يستخدمه Sereno للخطأ/النجاح. قاعدة الإتاحة مطلقة: لا يجوز أن يكون اللون القناة الوحيدة الحاملة لمعلومة. رسالة الخطأ الحمراء يجب أن تُشار أيضاً بأيقونة، أو بادئة نصية («خطأ:»)، أو شكل مميز. والحقل غير الصالح يجب أن يحمل حداً أسمك أو أيقونة، لا حداً أحمر فحسب.

انعكاس التحقق الشرطي: اطلب من الذكاء الاصطناعي المحاكاة. «صِف هذه الواجهة كما يراها شخص مصاب بعمى الأخضر؛ وعدّد كل موضع تُحمل فيه معلومة باللون وحده.» ويمكنك أيضاً اختبار التدرج الرمادي الذهني: لو تحولت الصفحة كلها إلى أبيض وأسود، فهل تبقى الحالات قابلة للتمييز؟ إن نعم، فتصميمك متين؛ وإن لا، فأنت تعرف ما يجب مضاعفته بأيقونة أو تسمية.

WCAG فيما يتجاوز النص: نسبة 3:1 لعناصر الواجهة

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

فكّر أيضاً في الحالات الدلالية كأزواج كاملة: كل لون حالة (نجاح، خطأ، تحذير، معلومة) يوجد بنسخة نص ونسخة خلفية ونسخة حد — وكل تركيبة تجتاز عتباتها في السمتين. هذه هي اللحظة التي يغادر فيها نظامك «اللوحة الجميلة» ليصبح سمة إنتاج حقيقية.

flowchart TD
  P["اللوحة الأساس: أدوار ودرجات"] --> E["سلالم من 50 إلى 900 بـOKLCH"]
  E --> T1["نسب النص: 4.5 إلى 1 حداً أدنى"]
  E --> T2["نسب غير النصي: 3 إلى 1 حداً أدنى"]
  T1 --> D["محاكاة عمى الألوان: المعلومة ليست باللون وحده أبداً"]
  T2 --> D
  D --> S["السمة الداكنة: أدوار مُعاد إعلانها واختبارها"]
  S --> V["سمة معتمَدة: فاتح + داكن موثَّقان"]

تسليم سمة، لا ألوان

لنلخّص المُسلَّم النهائي لمطوّر Sereno: سلالم الدرجات (المادة الخام)، والأدوار الوظيفية بإعلانين (فاتح وداكن)، وأزواج الحالات الدلالية الكاملة، ووثيقة استخدام قصيرة — أي رقم سلّم لأي استخدام، وأي تركيبات مضمونة، وكيف يُضاف لون دون كسر النظام. أضف احترام خيار المستخدم: تتبع السمة prefers-color-scheme افتراضياً، لكن مفتاحاً يدوياً يجب أن يستطيع فرضها، لأن التأمل مساءً بوضع فاتح مفروض ليس تجربة فاخرة.

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