باستخدام التباين العالي في اللون للحصول على تصميم أكثر سهولة
غالبًا ما يكون السبب وراء ارتفاع معدل الارتداد هو ضعف إمكانية الوصول المرئي لموقع الويب. عندما تكون الخطوط صغيرة جدًا ، أو تكون بالكاد مقروءة ، عندما يكون هناك الكثير من الانحرافات أو عدم وجود مساحة بيضاء كافية ، فإن الكثير من الأشخاص فقط مغادرة الموقع دون التفكير الثاني.
أحد الأسباب الأكثر شيوعًا للتخلي المبكر هو سوء الاختيار أنظمة الألوان التي تقلل من سهولة القراءة المحتوى.
وفقًا لإحصاءات منظمة الصحة العالمية ، يوجد حوالي 285 مليون شخص يعانون من ضعف البصر في جميع أنحاء العالم ، وكثير منهم مصابون بالعمى جزئيًا أو كليًا. يرى الأشخاص المعاقون بصريًا الألوان بطريقة مختلفة تجنب انخفاض تباين الألوان في تصميماتنا أمر لا مفر منه إذا كنا نريد أن نقدم لعملائنا موقع ويب سهل الاستخدام وسهل الاستخدام.
معايير الويب لتباين الألوان
نسبة تباين اللون يقيس الفرق في التباين بين لونين. كلما زادت القيمة ، كلما كان التمييز بين الكائن (النص ، الصورة ، الرسم) أسهل في المقدمة من الخلفية..
يمكن أن تتباين الألوان بعدة طرق مختلفة ، مثل: مسحة, القيمة و التشبع. يتم حساب نسبة تباين الألوان من خلال صيغة مقدمة من W3C ، المنظمة الدولية للمعايير الرئيسية لشبكة الويب العالمية.
يمكن أن يستغرق قيمة بين 1: 1 (لا يوجد تباين على الإطلاق, المقدمة والخلفية لها نفس اللون) و 21: 1 (أقصى النقيض موجود فقط بين الأسود والأبيض).
توفر أحدث إرشادات الوصول إلى محتوى الويب (WCAG) 2.0 من W3C لمطوري الويب ومنشئي المحتوى معايير لمعيار الحد الأدنى (مستوى AA) والقيمة المحسنة (مستوى AAA) لنسبة تباين الألوان المقبولة.
المستوى AA يتطلب على الأقل 4.5: 1 نسبة للنص العادي, و 3: 1 للنص الكبير. من الأسهل قراءة نص كبير مثل الترجمة ، ولهذا السبب يحتاج إلى تباين ألوان أقل.
إذا كنت ترغب في الوصول إلى المستوى AAA وهو المستوى المحسن ، فأنت بحاجة إلى تصميم نظام الألوان الخاص بك بعناية أكبر ، لأنه يتطلب على الأقل نسبة تباين 7: 1 للنص العادي, و 4.5: 1 لكبير. إذا كان النص جزءًا من شعار أو اسم علامة تجارية ، فلا يوجد حد أدنى لمتطلبات تباين الألوان على مستوى WCAG.
يمكننا فقط الاتصال بموقع ويب يمكن الوصول إليه بصريًا إذا كان تصل نسبة تباين الألوان بين كل كائن أمامي وخلفيته إلى مستوى AA على الأقل.
فوائد نسبة تباين الألوان العالية
من خلال ضمان سهولة القراءة ، لا تشغل فقط المستخدمين ضعاف البصر ، ولكن أيضًا الأشخاص الذين يقرؤون المحتوى الخاص بك على شاشات صغيرة مثل على الهاتف الذكي أو ساعة ذكية ، من بين ظروف الإضاءة السيئة, و على شاشات أقل جودة.
يقرأ الأشخاص أيضًا بشكل أسرع عندما يكون هناك تباين أعلى بين النص والخلفية ، لذلك سيستغرق الأمر على الأرجح وقتًا أطول حتى يشعروا بالملل من محتوى الموقع.
إذا كنت قلقًا من أن تطبيق نسبة تباين أعلى سيكون له تأثير سلبي على جماليات التصميم الخاص بك ، فأنت بحاجة إلى مراجعة مشروع ويب Contrast Rebellion الذي يثبت ، مع أمثلة واقعية ، أن الالتزام بقواعد نسبة التباين العالية يمكن أن يستمر في تصاميم جذابة وباردة.
تطبيقات لفحص لون التباين
هناك العديد من الأدوات المجانية الرائعة في جميع أنحاء الويب والتي يمكن أن تساعد المصممين على التحقق من نسبة تباين الألوان في مواقع الويب الخاصة بهم.
تتمثل أسهل طريقة لاختبار تصميمك في تباين الألوان في اختيار الألوان الرئيسية إما باستخدام Photoshop أو امتداد متصفح مناسب مثل هذا لـ Firefox ، ونسخ القيم إلى أحد التطبيقات أدناه.
أهم شيء يجب تذكره هو أنك تحتاج دائمًا إلى ذلك مقارنة اللون الأمامي مثل لون النص بالمنطقة المحيطة به (لون الخلفية).
1. WebAim لون التباين مدقق
WebAim (Web Accessibility In Mind) هي مؤسسة تروج لإمكانية الوصول إلى الويب والتي توفر للمطورين مدقق تباين ألوان بسيط ولكنه موثوق به من بين العديد من أدوات إمكانية الوصول الرائعة الأخرى مثل Wave ، وهو تطبيق عام لتقييم إمكانية الوصول يمكنه مساعدتك تقييم مشاكل الوصول إلى موقعك بسرعة.
يخبرك مدقق التباين اللوني في WebAim إذا نجحت ألوانك في اختبار WCAG AA و AAA, سواء بالنسبة للنصوص العادية والكبيرة.
2. سنوك فحص التباين اللون
قام جوناثان سنوك ، الذي يعمل حاليًا كمطور رئيسي في Shopify ، باستضافة أداة التحقق من تباين الألوان الخاصة به منذ أكثر من عقد. تطبيق Snook يسمح لك تغيير قيم HSL و RGB لون المقدمة والخلفية واحدا تلو الآخر باستخدام المتزلجون مجموعة مريحة حتى تصل إلى نتيجة متوافقة مع معايير WCAG 2.0.
CheckMyColours
يسمح لك CheckMyColours الذي أنشأته جيوفاني سكالا بالتحقق من نسبة تباين الألوان لجميع مجموعات ألوان الخلفية الأمامية على موقع مباشر.
يحسب نسبة تباين اللمعان ، فرق السطوع, و اختلاف اللون, ويزودك بتقرير كامل عن النتائج. يمكن أن يسهل تقرير CheckMyColours بشكل كبير فهمك لكيفية تحسين إمكانية الوصول المرئي لموقعك.
مصمم نظام الألوان
لا يعد Color Scheme Designer أداة فحص تباين الألوان ، ولكنه أداة خاصة بـ تصميم مخططات الألوان الكاملة.
نقوم بإدراجه في هذه المجموعة ، لأنه يحتوي على ميزة تتيح لك معرفة كيف ينظر إلى نظام الألوان الخاص بك من قبل الأشخاص الذين يعانون من أنواع مختلفة من الإعاقات البصرية. يمكنك اختبار الألوان الخاصة بك للتأكد من عدم وجود عمى ألوان كامل لها ، و protanopy ، و deuteranopy ، والعديد من العيوب البصرية الأخرى. يحتوي التطبيق على إصدار أحدث يسمى Paletton والذي يجعل حتى محاكاة رؤية أكثر تعقيدًا ممكنة (يمكنك أيضًا اختبار أشياء مثل شاشة LED الرديئة أو شاشة CRT ضعيفة).
يزودك W3C أيضًا بقائمة أدوات تقييم إمكانية الوصول إلى الويب الضخمة حيث يمكنك العثور على العديد من أدوات تباين الألوان الأخرى مثل عجلة الألوان المساعدة هذه.
نصائح لإنشاء المواقع التي يمكن الوصول إليها بصريا
إذا كنت ترغب في إنشاء موقع ويب يمكن الوصول إليه بصريًا ، فستكون دائمًا فكرة جيدة تجنب استخدام اللون وحده لنقل الوظيفة أو المعنى. الرموز التي تغير لونها بناءً على حالتها الحالية هي أمثلة نموذجية على ذلك.
إذا كان ذلك ممكنا ، دائما تصميم العظة البصرية إضافية التي تساعد الأشخاص الذين يرون الألوان بشكل مختلف في فهم الوظيفة.
لا تنسى أبدا إيلاء اهتمام إضافي لتباين الألوان من الأزرار والروابط والقوائم, لأنها وسيلة التنقل على موقعك. إذا لم يتمكن المستخدمون من التنقل بسهولة على موقعك ، فستفقدهم بسرعة. ألوان يمكن الوصول إليها لأزرار الحث على الشراء هم أيضا حاسمة لمعدلات التحويل جيدة.
من الممارسات الجيدة لسير العمل اختبار نسبة تباين الألوان في أقرب وقت ممكن في عملية التصميم ، حيث سيكون من الصعب إقناع العميل بتغيير نظام الألوان الخاص بالموقع لاحقًا أسفل عملية التصميم.
اقرأ الآن: النهج العملي لاختيار نظام ألوان الموقع
