استخدام تباين المقدمة وألوان الخلفية في تصميم الويب

تحسين إمكانية قراءة موقعك على الويب وتجربته باستخدام تباين مناسب

يلعب التباين دورًا مهمًا في نجاح أي تصميم لموقع الويب. من الطباعة في هذا الموقع ، إلى الصور المستخدمة في جميع أنحاء الموقع ، إلى التباين بين عناصر المقدمة وألوان الخلفية - يجب أن يكون لموقع مصمم بشكل جيد تباينًا كافٍ في جميع هذه المناطق لضمان تجربة مستخدم عالية الجودة ونجاح طويل الأمد في الموقع.

التباين المنخفض يساوي تجربة القراءة سيئة

يمكن أن يكون من الصعب قراءة المواقع الإلكترونية التي تكون منخفضة للغاية ، والتي سيكون لها تأثير سلبي على نجاح أي موقع. غالبًا ما يكون من السهل التعرف على مشكلات تباين الألوان السيئة. يمكنك القيام بذلك عادةً فقط من خلال النظر إلى صفحة يتم عرضها في متصفح ويب ويمكنك معرفة ما إذا كان النص صعبًا جدًا في القراءة بسبب خيارات الألوان الضعيفة. ومع ذلك ، في حين أنه قد يكون من السهل تحديد الألوان التي لا تعمل بشكل جيد معًا ، فيمكن أن يكون من الصعب جدًا تحديد الألوان التي تعمل بشكل جيد بالمقارنة مع الآخرين. قد لا تفعل ما لا يعمل ، ولكن كيف ستحدد ما الذي يعمل؟ من المفترض أن تساعدك الصورة الواردة في هذه المقالة في إظهار مجموعة متنوعة من الألوان المختلفة وكيفية تباين ألوان الألوان الأمامية والخلفية. يمكنك رؤية بعض الأزواج "الجيدة" وبعض الاقترانات "الضعيفة" ، والتي ستساعدك على اتخاذ خيارات الألوان الصحيحة في مشاريعك.

فيما يتعلق التباين

شيء واحد يجب أن تلاحظه هو أن التباين هو أكثر من مجرد مقارنة اللون اللامع بالخلفية. كما يجب أن ترى في هذه الصورة المذكورة أعلاه ، فإن بعض هذه الألوان مشرقة جدًا وتظهر بشكل حيوي على لون الخلفية - مثل الأزرق على أسود ، لكنني ما زلت أصفها بأنها تحتوي على تباين ضعيف. لقد فعلت هذا لأنه ، في حين أنه قد يكون مشرقًا ، فإن تركيبة اللون ما زالت تجعل النص صعبًا في القراءة. إذا كنت ستقوم بإنشاء صفحة في كل نص أزرق على خلفية سوداء ، فإن القراء سيكون لديهم إجهاد العين بسرعة كبيرة. هذا هو السبب في النقيض ليس فقط بالأبيض والأسود (نعم ، كان المقصود أن التورية). هناك قواعد وأفضل الممارسات على النقيض من ذلك ، ولكن كمصمم يجب عليك دائما تقييم هذه القواعد للتأكد من أنها تعمل في حالة معينة.

اختيار الألوان

التباين هو أحد العوامل التي يجب وضعها في الاعتبار عند اختيار الألوان لتصميم موقعك الإلكتروني ، ولكنه مهم. عند اختيار الألوان ، ضع في اعتبارك معايير العلامة التجارية للشركة ، ولكن كن على استعداد أيضًا للتعامل مع لوحات الألوان التي لا تتوافق بشكل جيد عبر الإنترنت مع إرشادات العلامة التجارية الخاصة بالمؤسسة. على سبيل المثال ، لقد وجدت دائمًا أن اللون الأصفر والمشرق من الخضار يمثلان تحديًا كبيرًا لاستخدامه بفعالية على مواقع الويب. إذا كانت هذه الألوان في إرشادات العلامة التجارية للشركة ، فمن المحتمل أن تحتاج إلى استخدامها كألوان مميزة فقط ، حيث يصعب العثور على ألوان تتناقض بشكل جيد مع أي منهما.

وبالمثل ، إذا كانت ألوان علامتك التجارية سوداء وبيضاء ، فهذا يعني تباينًا كبيرًا ، ولكن إذا كان لديك موقع به نصوص طويلة ، فإن وجود خلفية سوداء مع نص أبيض سيجعل القراءة صعبة للغاية. حتى التباين بين الأسود والأبيض هو عظيم ، والنص الأبيض على خلفية سوداء يسبب إجهاد العين لممرات طويلة. في هذه الحالة ، أود عكس الألوان لاستخدام النص الأسود على خلفية بيضاء. قد لا تكون مهتمة بصريًا ، لكنك لن تجد تباينًا أفضل من ذلك!

أدوات عبر الإنترنت

بالإضافة إلى التصميم الخاص بك ، هناك بعض الأدوات التي يمكنك استخدامها لاختبار اختيار لون موقعك.

سيختبر CheckMyColors.com جميع ألوان موقعك ويبلغ عن نسبة التباين بين العناصر على الصفحة.

بالإضافة إلى ذلك ، عند التفكير في خيارات الألوان ، يجب أيضًا مراعاة إمكانية الوصول إلى موقع الويب والأشخاص الذين لديهم أشكال من عمى الألوان. يمكن لـ WebAIM.org المساعدة في هذا الأمر ، كما يمكن لـ ContrastChecker.com ، الذي سيختبر اختياراتك ضد إرشادات WCAG.