مقال
استخراج لوحة ألوان متاحة من صورة
كثيراً ما تحتوي الصورة الفوتوغرافية أو أصل العلامة التجارية على بذرة نظام ألوان كامل. استخراج تلك البذرة وتشكيلها لوحةً قابلة للاستخدام ثم التحقق منها وفق معايير الإتاحة يتطلب ثلاث خطوات مستقلة. يغطي هذا المقال كل خطوة بالترتيب: كيف يعمل استخراج اللوحة من الداخل، وكيف تختار الألوان وتضبطها للاستخدام العملي، وكيف تتحقق من التباين وفق عتبات WCAG، وكيف تكتشف الأزواج التي تتطابق لمستخدمي عمى الألوان.
كيف تُستخرج اللوحة: أخذ عينات البكسل وتكميم الألوان
كل صورة رقمية شبكة من البكسلات، يحمل كل منها قيمة لون في فضاء مثل RGB. لا يفحص مستخرج اللوحة كل بكسل منفرداً: صورة بدقة 2 ميغابكسل تحتوي على 2 مليون نقطة بيانات، مما يكون بطيء المعالجة وسيعيد آلاف الفروق اللونية الطفيفة بدلاً من مجموعة مفيدة. عوضاً عن ذلك، تُعيّن الأداة نقاط عينة على شبكة البكسل على فترات منتظمة، مجمعةً مجموعة فرعية تمثيلية. تُغذَّى هذه المجموعة بعد ذلك في خوارزمية تكميم الألوان. النهج الأكثر شيوعاً يجمع الألوان المتشابهة باستخدام طريقة تجميع، تُسمى أحياناً تقسيم القطع الوسطى أو تقسيم نمط k-means. تضع الخوارزمية كل بكسل عيّنة في واحدة من عدد ثابت من الدلاء بناءً على تشابه اللون، ثم تحسب متوسط لون كل دلو. النتيجة قائمة صغيرة، عادةً 4 إلى 16 لوناً، تمثّل معاً النغمات البصرية السائدة في الصورة. الألوان التي تظهر فقط في مناطق صغيرة معزولة قد تُفوَّت، وهو سلوك متوقع لا خلل.
من الألوان السائدة الخام إلى لوحة قابلة للاستخدام
المخرج الخام لمستخرج اللوحة قائمة ألوان مرتبة حسب التكرار، لكن التكرار وحده لا يصنع لوحة. ستعيد صورة فوتوغرافية لغابة عدة أخضر متقاربة جداً لاستخدامها في واجهة مستخدم كعناصر تمييزية مستقلة. العمل العملي هو الاختيار والضبط. ابدأ بتحديد لون واحد كلونك الأساسي: الأكثر تميزاً والأقل حيادية. من الألوان المتبقية، ابحث عن اثنين على الأكثر يتباينان مع الأساسي ومع بعضهما. تلك تصبح ألوان التمييز. كل شيء آخر، بما في ذلك النغمات منخفضة التشبع التي يعيدها المستخرج في الغالب من الظلال والنغمات المتوسطة، يمكن أن يخدم كألوان محايدة للخلفيات والحدود. بمجرد حصولك على هذه البنية التقريبية، ستحتاج على الأرجح إلى ضبط قيم فردية. تتيح أداة color-converter فحص كل لون بتنسيق hex وRGB وHSL. HSL مفيد بشكل خاص هنا: يمكنك الإبقاء على صبغة اللون ثابتة وتغيير الإضاءة أو التشبع لإنشاء عائلة أضيق أو أوسع دون مغادرة نفس عائلة الألوان.
التحقق من التباين: عتبات WCAG للنص المقروء
بمجرد حصولك على ألوان مرشحة للنص والخلفية، تحتاج إلى التحقق مما إذا كان المزيج مقروءاً. تحدد إرشادات إتاحة محتوى الويب (WCAG) نسبة تباين لهذا الغرض. تقارن النسبة الإضاءة النسبية للونين: قيمة 1:1 تعني لا تباين (نفس اللون على نفس اللون)، و21:1 هو الحد الأقصى (أسود على أبيض). يتطلب WCAG 2.1 المستوى AA نسبة لا تقل عن 4.5:1 لنص الجسم بالحجم العادي، و3:1 للنص الكبير (18pt أو 14pt عريض). يضع المستوى AAA عتبات أعلى بـ 7:1 و4.5:1 على التوالي. لا تحتاج لحساب الإضاءة يدوياً. الفكرة الأساسية أن زوجاً من الألوان يبدو جيداً لعينك في ضوء جيد قد يقل عن 4.5:1 على الشاشة، والإرشاد موجود بالضبط لتلك الحالة. بعد استخراج الألوان وضبطها، اختبر كل زوج نص-على-خلفية تخطط لاستخدامه. رمادي نصفي يُقرأ جيداً على أبيض قد يفشل تماماً على خلفية بيج فاتح من لوحتك المستخرجة.
عمى الألوان: محاكاة كيف تبدو الأزواج للمتأثرين
نحو 1 من كل 12 رجلاً و1 من كل 200 امرأة لديهم شكل من أشكال قصور رؤية الألوان. النوع الأكثر شيوعاً هو ثنائي الألوان الأخضر deuteranopia (حساسية مخفضة للأخضر)، يليه ثنائي الألوان الأحمر protanopia (حساسية مخفضة للأحمر). ثنائي الألوان الأزرق-الأصفر tritanopia أندر. في كل نوع، يعيّن الجهاز البصري أطوالاً موجية معينة لنفس اللون المُدرَك الذي يرى غير المتأثرين كألوان مستقلة. المشكلة العملية للوحة أن لونين يبدوان مختلفَين بوضوح في الرؤية العادية قد يتطابقان إلى نفس النغمة لمستخدم مصاب بعمى الألوان، مما يجعلهما عديمَي الفائدة لنقل التمييز، كاستخدام الأحمر والأخضر فقط للإشارة إلى النجاح والخطأ. تشغيل محاكاة عمى الألوان يُظهر لك كيف تبدو اللوحة حين تُضغط القنوات المتأثرة. الأزواج التي تتطابق إلى رمادي أو بني متماثل تقريباً هي التي يجب إعادة النظر فيها: إما زيادة فرق الإضاءة بينهما حتى يبقى التباين دون تمييز اللون، أو إضافة إشارة ثانوية (شكل، تسمية، نمط) حتى لا يكون اللون الإشارة الوحيدة.
إجراؤه محلياً: color-palette وcolor-blindness وcolor-converter
يمكن إتمام الخطوات الثلاث الموضحة في هذا المقال دون إرسال صورتك أو ألوان علامتك التجارية إلى أي خادم. تعمل أداة color-palette بالكامل في المتصفح: تُسقط صورة، فتُعيّن نقاط العينة محلياً وتعيد الألوان السائدة كقيم hex. لا يُرسل أي ملف. تقبل أداة color-converter كود hex وتُظهر نفس اللون بتنسيق RGB وHSL حتى تتمكن من إجراء تعديلات مستهدفة على الإضاءة أو التشبع مع البقاء في نفس عائلة الصبغة. كل من hex والقيم المحوّلة موجودة فقط في الصفحة. تعمل أداة color-blindness بالاتجاه المعاكس: تُسقط صورة فتُصيِّر محاكاة deuteranopia وprotanopia وtritanopia لتلك الصورة، محسوبة في المتصفح. وللتحقق من لوحة ألوان لا من صورة، صدِّر أو التقط لقطة شاشة لعيّناتك كصورة أولاً، ثم أسقط تلك الصورة في المحاكي. باستخدام الأدوات الثلاث بالتسلسل، استخراج من الصورة ثم ضبط في color-converter ثم تصدير صورة عيّنات والتحقق منها في color-blindness، تغطي سير العمل الكامل الموضح أعلاه. تبقى صورتك على جهازك طوال الوقت، مما يهم إذا كانت الصورة المصدر تحتوي على هوية علامة تجارية غير منشورة أو هوية عميل لم تُصدر بعد.
الأدوات المذكورة في هذا المقال
- مستخرج لوحة الألواناستخرج الألوان السائدة من صورة كعيّنات HEX. انسخ أي لون. بدون تحميل.
- محاكي عمى الألوانمحاكاة protanopia وdeuteranopia وtritanopia وachromatopsia على صورة. بدون تحميل.
- محوّل الألوانحوّل الألوان بين HEX وRGB وHSL وHSV وCMYK. يتضمن مدقق التباين WCAG. بدون تحميل.
- مولّد نظام الألوانتوليد لوحات ألوان تكميلية ومتشابهة وثلاثية ورباعية وأحادية اللون من لون أساسي. بدون تحميل.
الأسئلة الشائعة
كم لوناً يعيد مستخرج اللوحة عادةً؟
تعيد معظم الأدوات بين 5 و16 لوناً بشكل افتراضي، رغم أن كثيراً منها يتيح ضبط العدد. إعادة عدد أقل من الألوان تعني أن الخوارزمية يجب أن تجمع بكسلات أكثر معاً، مما قد يدمج نغمات مستقلة لكن متشابهة. إعادة عدد أكثر قد تنتج ألواناً شبه مكررة يصعب استخدامها بشكل مستقل. للوحة واجهة مستخدم، 6 إلى 8 ألوان هو عادةً نقطة بداية عملية.
هل يمكن للوحة مستخرجة من صورة أن تجتاز تباين WCAG تلقائياً؟
ليس تلقائياً. غالباً ما تكون الألوان السائدة في الصورة الفوتوغرافية نغمات متوسطة بإضاءة معتدلة، ما يميل لإنتاج نسب في نطاق 2:1 إلى 3:1 فيما بينها. تحقيق عتبة 4.5:1 لنص الجسم يتطلب عادةً تفتيح قيم الخلفية أو تغميق قيم النص أكثر مما يوفره الاستخراج الخام. الاستخراج يمنحك نقطة بداية؛ فحص التباين يخبرك بمقدار التعديل المطلوب.
هل تأخذ نسبة تباين WCAG عمى الألوان بعين الاعتبار؟
جزئياً. صيغة الإضاءة في WCAG تعتمد على السطوع النسبي لا الصبغة، لذا زوج عالي التباين يحقق 4.5:1 سيبقى عموماً مميزاً حتى لمستخدمي عمى الألوان لأن فرق الإضاءة محفوظ. غير أن لونين بإضاءة متشابهة لكن صبغات مختلفة، كالأحمر والأخضر بنفس الإضاءة، يمكن أن يجتازا فحص التباين القائم على الإضاءة بينما يظلان غير متمايزَين للمصابين بـ deuteranopia. تشغيل محاكاة عمى الألوان هو الطريقة الصحيحة للتحقق من تمايز مستوى الصبغة بشكل منفصل عن نسبة التباين.