تحويل الألوان بين HEX وRGB وHSL وفحص التباين: هل نصّك مقروء فعلاً؟
يسلّمك المصمم ملفاً فيه اللون الأزرق بصيغة HEX، بينما تطلب منك مكتبة الواجهة صيغة RGB، وفي ملف الأنماط تحتاج درجة أفتح منه قليلاً. ثلاث صيغ للون واحد، وفي كل مرة تنقل بينها بيدك أو بحساب تقريبي. هذا يستهلك وقتاً ويفتح باباً للخطأ، وأداة التحويل تنجز ذلك في لحظة وبدقة.
ثلاث صيغ للون نفسه
- HEX: علامة # يتبعها ستة أرقام ستة عشرية، مثل #00609b، كل زوج منها يمثل مقدار الأحمر والأخضر والأزرق. تُقبل أيضاً الصيغة المختصرة بثلاثة أرقام، مثل #fff.
- RGB: المقادير نفسها بالأرقام العشرية من 0 إلى 255، مثل rgb(0, 96, 155). هي الأقرب إلى كيفية عمل الشاشة فعلاً.
- HSL: يصف اللون كما نفكر فيه نحن: درجة اللون على عجلة، ثم مدى نقائه، ثم مدى فتحه. مثل hsl(205, 100%, 30%).
لماذا HSL مفيد للمصممين
في RGB، لتفتيح لون عليك تعديل الأرقام الثلاثة معاً بنسب متوازنة، وإلا انحرف اللون إلى درجة أخرى. أما في HSL فالتفتيح رقم واحد: ارفع قيمة الإضاءة. هكذا تُبنى درجات لون واحد بسهولة: غامق للنص، وعادي للأزرار، وفاتح للخلفيات، كلها من درجة اللون نفسها. أداة تحويل الألوان في سهل تعرض لك الصيغ الثلاث معاً ليسهل نسخ ما تحتاجه.
التباين: أهم ما يفوت المصممين
اختيار اللون لا يتوقف عند جماله. لون النص يجب أن يتباين بما يكفي مع خلفيته، وإلا صار غير مقروء لمن لديه ضعف في الرؤية، أو لمن يقرأ على هاتف تحت ضوء الشمس. ولقياس ذلك توجد نسبة التباين: مقارنة بين سطوع اللونين، تبدأ من 1:1 للونين متطابقين وتصل إلى 21:1 للأسود على الأبيض.
يحدد معيار الوصول WCAG حدّين أدنيين للمستوى المعتمد AA:
- 4.5 إلى 1 للنص العادي.
- 3 إلى 1 للنص الكبير.
وللمستوى الأشد AAA حدّان أعلى: 7 إلى 1 للنص العادي و4.5 إلى 1 للكبير. تحسب الأداة النسبة وتقول لك صراحة أيّ المستويات ينجح.
الرمادي المتوسط على الأبيض مثال معروف: يبدو مقبولاً لعين سليمة في ضوء جيد، لكنه يفشل في الاختبار لأن حكم الأداة مبني على حساب لا على الانطباع.
لماذا لا تكفي الحسابات التقريبية
أبسط طريقة لتقدير سطوع لون أن تأخذ متوسط مقاديره الثلاثة، لكن هذا يعطي نتائج خاطئة. الشاشات لا تعرض الأرقام بصورة خطية، فيجب تصحيح كل مقدار بدالة جاما قبل حساب السطوع، والعين أيضاً أكثر حساسية للأخضر منها للأزرق. الأداة تطبق هذا التصحيح كما يقتضي المعيار، وبذلك تتطابق نتيجتها مع ما تحسبه أدوات الاختبار المعتمدة.
أخطاء شائعة في اختيار ألوان النص
- الاعتماد على الشاشة وحدك: شاشتك قد تكون مضبوطة بسطوع عالٍ، فيبدو النص مقروءاً، بينما يراه غيرك على شاشة أقل جودة أو في ضوء النهار باهتاً. الرقم لا يتأثر بشاشتك.
- إهمال الحالات الأخرى: لون الرابط بعد النقر، ولون الزر المعطّل، ولون النص عند التمرير. كل منها يحتاج فحصه على خلفيته.
- النص فوق صورة: التباين هنا يتغير من نقطة لأخرى في الصورة. اختبر على أفتح منطقة وأغمقها خلف النص، أو ضع طبقة معتمة خلفه.
- الاعتماد على اللون وحده للدلالة: وضع الأخطاء بالأحمر والنجاح بالأخضر فقط لا يفهمه من يعاني عمى الألوان. أضف أيقونة أو كلمة بجانب اللون.
خطوات الاستخدام
- الصق اللون بأي صيغة: HEX أو rgb أو hsl.
- انسخ الصيغة التي تحتاجها من الثلاث.
- للتباين، أضف لون الخلفية.
- اقرأ النسبة وحكمها للنص العادي والكبير، ثم عدّل اللون حتى ينجح.
سيناريو واقعي
مصمم يعدّ صفحة لشركة، فيختار أزرق داكناً للروابط على خلفية بيضاء. يضع الأزرق #00609b والأبيض في الأداة فتعرض نسبة تقارب 6.7 إلى 1، وهو ينجح للنص العادي في المستوى AA لكنه لا يبلغ حدّ المستوى AAA للنص العادي. يقرر أن هذا كافٍ لجسم النص، ثم يجرّب رمادياً فاتحاً للتعليقات الجانبية فيجده يفشل، فيغمّقه من خانة الإضاءة في HSL حتى ينجح، دون أن تتغير درجة اللون. وإن كان اللون سيدخل في رمز استجابة سريعة، فـمولّد رمز QR يتيح لك اختيار لون مناسب بالتباين نفسه.
أسئلة شائعة
ما الفرق بين #fff و#ffffff؟
لا فرق. الصيغة المختصرة تكرّر كل رقم مرتين، فتصبح #fff مساوية تماماً لـ #ffffff.
هل نجاح نسبة التباين يعني أن التصميم مقروء؟
هو حد أدنى لا ضمان. حجم الخط وسماكته والمسافات كلها تؤثر أيضاً. لكن التباين أول ما يُفحص وأسهل ما يُصلح.
هل يُرسل اللون إلى خادم؟
لا. التحويل وحساب التباين يجريان داخل متصفحك.
هل يتغير اللون عند التحويل بين الصيغ؟
القيمة نفسها لكن قد تظهر فروق طفيفة في التقريب، فالتحويل إلى HSL ثم الرجوع قد ينتج رقماً يختلف بوحدة واحدة. ولهذا استعمل صيغة واحدة مصدراً أصلياً ولا تتنقل بينها ذهاباً وإياباً.
هل تقبل الأداة لوناً بقناة شفافية؟
تقبل صيغة HEX ذات الأربعة أرقام، لكن حساب التباين يعتمد على اللون نفسه ولا يأخذ الشفافية في الحسبان، لأن الشفافية تعتمد على ما خلف اللون. إن كان نصك شفافاً جزئياً فاحسب اللون الناتج فعلياً فوق الخلفية ثم افحصه.
ما المقصود بالنص الكبير؟
في معيار WCAG هو النص الأكبر حجماً أو الأثقل خطاً، ولذلك يحتاج نسبة تباين أقل. لا تُعامل أي نص بحجم متوسط على أنه كبير للحصول على حكم أسهل؛ اختبره بوصفه نصاً عادياً إن كنت في شك.
