لوحة ألوان أم نظام ألوان: أعطِ كل لون دورًا
تصبح لوحة الألوان نظامًا حين يكون لكل لون دور: الخلفية، والنص الذي يجب أن يُقرأ، واللون المميز الذي يجب أن يبرز. ثم نتحقق من تباين كل لون مع اللون الذي خلفه، على عنوان وفقرة وزر حقيقية.
MoBenصانع فيديو مستقل
المحتويات
لوحة الألوان قائمة ألوان. أما نظام الألوان فهو القائمة نفسها مع دور لكل لون: لون للـخلفية، ولون للـنص الذي يجب أن يُقرأ، ولون مميز لما يجب أن يبرز، مثل معلومة أساسية أو زر. ومن دون هذه الأدوار يفقد حتى العنوان بروزه.
وجدت لوحة ألوان تعجبك، خمسة مربعات متناسقة. ثم استعملتها في صفحة أو صورة مصغرة أو فيديو، فلم يعد شيء يبرز. اختيار الألوان شيء وتوزيعها شيء آخر. هذه هي الطريقة التي أطبقها قبل أن أرسم أي شيء.
ما الفرق بين لوحة الألوان ونظام الألوان؟
تجيب اللوحة عن سؤال « أي ألوان؟ ». ويجيب النظام عن « أي لون لأي شيء، وفوق أي لون؟ ». في المثال أدناه تصبح اللوحة نفسها نظامًا: الرملي للخلفية، والحبري للنص، والآجري للزر والعلامات الصغيرة. ولا يظهر الخردلي إلا في خط سفلي، ولا يُستعمل المريمي أبدًا.
كيف تعطي كل لون دورًا؟
- الخلفية: اللون الذي يغطي أكبر مساحة. يبقى هادئًا ليسهّل قراءة كل ما عداه.
- النص: لون العناوين والفقرات، ويتباين بقوة مع الخلفية.
- اللون المميز: لون واحد لما يجب أن يجذب العين، مثل زر أو سعر أو كلمة مفتاحية. كلما قلّ استعماله ازداد بروزه.
- الألوان الثانوية: الحدود والأيقونات والتفاصيل الصغيرة والحالات (التمرير، الخطأ). لا تحمل نصًا مهمًا إذا كان تباينها لا يسمح بذلك.
لست مضطرًا إلى استعمال كل ألوان اللوحة، ولا بكميات متساوية. ينطلق كثير من المصممين من القاعدة التجريبية 60-30-10: نحو 60% للون الغالب، و30% للون الثانوي، و10% للون المميز. ليست معيارًا، بل نقطة انطلاق تمنع إعطاء كل الألوان المكانة نفسها.
كيف تتحقق من التباين بين النص والخلفية؟
لا يُحكم على اللون وحده أبدًا، بل على اللون الذي سيكون خلفه. تقيس WCAG هذا الفرق بنسبة تباين تمتد من 1:1 (لا فرق) إلى 21:1 (أسود على أبيض). وهذه العتبات المهمة:
- 4.5:1 للنص العادي، المستوى AA (المعيار 1.4.3).
- 3:1 للنص الكبير، أي 18 نقطة على الأقل، أو 14 نقطة بخط عريض (نحو 24 px و18.5 px).
- 3:1 لعناصر الواجهة والرسوم الضرورية للفهم، مثل إطار حقل أو أيقونة منفردة (المعيار 1.4.11).
- 7:1 للنص العادي و4.5:1 للنص الكبير في المستوى المعزز AAA (المعيار 1.4.6).
« يُحسب التباين بطريقة لا يكون فيها اللون (التدرج اللوني) عاملًا حاسمًا. » W3C، Understanding SC 1.4.3 (مترجم من الإنجليزية)
بمعنى آخر، الفرق في درجة الإضاءة هو المهم. قد يبدو الأحمر والأخضر مختلفين جدًا ولهما تقريبًا الإضاءة نفسها، فيكون التباين ضعيفًا جدًا. ويوضح W3C أيضًا أن النسبة لا تُقرّب: 4.499:1 لا تبلغ عتبة 4.5:1.
هل ينجح لون في التفاصيل ويفشل خلفيةً؟
نعم، وهنا تتعثر اللوحة غالبًا. في مثالي لا يتجاوز الخردلي على الرملي 1.62:1، فلا يمكن كتابة أي نص به. لكنه يبقى مفيدًا في تفصيل زخرفي صغير، مثل الخط تحت العنوان، الذي لا يحتاج إلى القراءة. وإذا أصبح خلفية زر، فالنص يجب أن يكون حبريًا (8.51:1)، لأن الأبيض ينخفض إلى 1.89:1.
والمنطق نفسه ينطبق على أحمر MoBen Prod، #D90E43، فوق خلفية شبه سوداء: 3.83:1. يناسب عنوانًا كبيرًا ولا يناسب فقرة. لذلك يُستعمل في هذا الموقع لونًا مميزًا، ويبقى النص العادي فاتحًا.
لماذا تختبر اللوحة على عنوان وفقرة وزر؟
خمسة مربعات متجاورة لا تُظهر شيئًا من هذا. قبل اعتماد أي لوحة أصنع نموذجًا صغيرًا فيه عنوان حقيقي وفقرة من بضعة أسطر وزر، على الخلفية المقررة. ثم أتحقق:
- هل يبرز العنوان من النظرة الأولى؟
- هل تُقرأ الفقرة دون جهد، حتى بحجم صغير؟
- هل الزر أول ما يلاحظه القارئ بعد العنوان؟
- هل هناك لون مميز واحد، أم ثلاثة يتنازعون على الانتباه؟
يستغرق هذا الاختبار بضع دقائق ويمنعك من اكتشاف المشكلة بعد نشر الموقع. ثم تُكتب قواعد استعمال الألوان في دليل الهوية، كما أشرح في مقال الهوية البصرية ودليل العلامة.
ما الأدوات التي تفحص التباين؟
- WebAIM Contrast Checker: تدخل رمزين سداسيين فتعطيك الأداة النسبة مع نتيجة AA وAAA للنص العادي والنص الكبير وعناصر الواجهة. ويساعد مؤشر الإضاءة على تصحيح لون فاشل.
- أدوات إمكانية الوصول في Adobe Color: فاحص تباين يقارن النتيجة بـWCAG، وأداة تنبه إلى الألوان التي يصعب التمييز بينها لدى المصابين بعمى الألوان.
- Colour Contrast Analyser (Vispero، سابقًا TPGi): تطبيق مجاني لـWindows وmacOS، مع قطارة ألوان تلتقط اللون من أي مكان على الشاشة. مفيد على إطار من فيديو أو على نموذج تصميم.
- أدوات المطورين في Chrome: يبيّن منتقي الألوان ما إذا كان تباين النص يبلغ المستوى AA أو AAA، مباشرة على الصفحة المنشورة.
وماذا عن الفيديو: الصور المصغرة والترجمة والموشن ديزاين؟
تنطبق الأدوار نفسها على الصورة المتحركة، مع صعوبة إضافية: الخلفية تتغير مع كل لقطة.
- الصور المصغرة: خلفية واحدة، ولون نص واحد، ولون مميز واحد. يجب أن يبرز العنوان بحجم صغير جدًا وسط شبكة من الصور الأخرى.
- الترجمة: الخلفية هي الفيديو نفسه. تستعمل BBC الأبيض على الأسود في أغلب الحالات؛ وعلى لقطة فاتحة أضف إطارًا خارجيًا أو ظلًا أو شريطًا. التفاصيل في مقال الترجمة المقروءة.
- الموشن ديزاين: احتفظ باللون المميز للحظة المهمة (رقم أو اسم أو دعوة إلى الفعل) بدل أن تجعله يومض في كل مكان.
أتحقق من التباين على أفتح إطار وأكثره ازدحامًا في المقطع، لا على أسهله.
أسئلة شائعة
كم لونًا يحتاج النظام؟
غالبًا تكفي ثلاثة أدوار: خلفية ونص ولون مميز، مع لون أو لونين ثانويين للتفاصيل. المهم ليس عدد الألوان بل أن يكون لكل لون وظيفة واضحة.
ما نسبة التباين المطلوبة للزر؟
نص الزر نص مثل غيره: 4.5:1 مع لون الزر، أو 3:1 إذا كان كبيرًا بما يكفي. ويجب أن تتميز خلفية الزر أيضًا عما يحيط بها (3:1) حين تكون هي ما يجعل الزر معروفًا.
هل يمكن أن يفشل لون العلامة في اختبار التباين؟
نعم. تستثني WCAG النص الذي يكون جزءًا من شعار، لكنها لا تستثني العناوين ولا الأزرار. إذا فشل لون العلامة، نحتفظ به للعناصر الكبيرة واللمسات المميزة، وننشئ درجة أغمق أو أفتح للنص.
هل القاعدة 60-30-10 إلزامية؟
لا، إنها قاعدة تجريبية. تساعد على تجنب توزيع كل الألوان بالتساوي، لكن الواجهة أو الملصق أو الفيديو قد تحتاج إلى نسب أخرى. ويبقى اختبار العنوان والفقرة والزر أكثر موثوقية.
تُختار اللوحة في دقائق، أما النظام فيُبنى بالاختبار. هذا أساس عملي في العلامة والهوية البصرية، ونجده بعد ذلك في إنشاء المواقع وفي الفيديوهات. حدثني عن مشروعك.
للتعمق أكثر
