تحديث تباين لون النص

يجب أن يتمكن الجميع من قراءة نصك

ومن المهم أن يكون النص مرئيًا ومقروءًا. إذا كنت تريد أن يفهمه الزوار، يجب أن يكونوا قادرين على قراءته أولاً.

يضمن التباين الجيد في النص أنه يمكن للجميع رؤية النص على الخلفية التي يظهر عليها.

لا يري الجميع اللون بنفس الدرجة. حددت WCAG متطلبات تباين محددة في إرشادات WCAG 2.1 (المستوى أأ) للتأكد من أن النص مقروء للجميع. اتبع تلك المتطلبات وأفضل ممارسات التباين لدينا لإصلاح مشكلات التباين أو منعها.

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

استخدام Ally للعثور على نص بتباين رديء

استخدم تقرير إمكانية وصول ذوي الاحتياجات الخاصة في Ally لاكتشاف مشكلات إمكانية وصول ذوي الاحتياجات الخاصة على موقعك وإصلاحها. استخدم الرابط المتوفر للتقرير وسجل الدخول. افتح التقرير وانظر إلى قائمة المشكلات في جدول مشكلات إمكانية وصول ذوي الاحتياجات الخاصة.

يوجد جدول "مشكلات إمكانية وصول ذوي الاحتياجات الخاصة" في كل من علامتي التبويب "نظرة عامة" و"المجال". ابدأ في علامة التبويب "المجال" للاطلاع على المشكلات الخاصة بالمجال. 

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

إذا بدأت في علامة التبويب نظرة عامة، فحدد المشكلة ثم المجال الذي يحتوي على المشكلة.

يمكن أن تبدأ مشكلات التباين باستخدام المستند أو HTML في القائمة.

من قائمة مشكلات التباين في المجال، حدد مؤشر الدرجة بجوار عنصر يحتوي على المشكلة. تظهر لوحة ملاحظات محرر المحتوى.

معاينة النص بتباين رديء

تعرض لك لوحة ملاحظات Ally معاينة للمحتوى، بالإضافة إلى الملاحظات التفصيلية والدعم لمساعدتك في إصلاح مشكلات إمكانية وصول ذوي الاحتياجات الخاصة لديك. استخدم المعاينة لرؤية النص المحتوي على تباين رديء.

تبرز المعاينة المواضع التي يمكن فيها العثور على مشكلات إمكانية الوصول المحددة في المستند. تعرض مواضع التمييز كل موضع لنوع مشكلة واحد في كل مرة. على سبيل المثال، إذا كان النص لديك يحتوي على تباين رديء، فإن مواضع التمييز تظهر لك كل موضع تحدث فيه هذه المشكلة المحددة.

أدوات المعاينة

استخدم أدوات المعاينة لاستكشاف المشكلات في المستند.

• تنقل عبر المعاينة صفحة تلو الأخرى.
• تعرف على عدد المرات التي تظهر فيها مشكلة محددة.
• تنقل بين مواضع تمييز المشكلة.
• قم بإخفاء أو إظهار المواضع المميزة.
• قم بتكبير محتوى المعاينة أو تصغيره.
• إذا كانت المشكلة في مستند مرفق، فقم بتنزيل الملف الأصلي.

اتباع الخطوات الإرشادية الخاصة بـ Ally لإصلاح التباين الرديء

يفترض Ally أن لديك معرفة أساسية بـ HTML وكيفية استخدام نظام إدارة المحتوى (CMS). لاتباع الخطوات الإرشادية، تحتاج إلى معرفة كيفية تحرير صفحة ويب في HTML أو التعليمة البرمجية المصدر في نظام إدارة المحتوى.

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

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

حدد كيفية إصلاح التباين لاتباع الخطوات الإرشادية.

طرق إصلاح مشكلات التباين

عند وجود تباين رديء في النص، فهذا يعني أنه لا يوجد تباين لوني كافٍ بين النص والخلفية التي يظهر عليها.

توضح الخطوات الإرشادية لـ Ally كيفية تغيير لون النص. ويمكنك أيضًا تغيير لون الخلفية. 

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

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

بالنسبة لمشكلات التباين المتكررة، قد ترغب في تحديث القالب بدلاً من ذلك. تحتاج تحديثات القالب إلى معرفة معينة بـ HTML وCSS، وقد تعتمد على العلامة التجارية لموقعك. 

تفضل بزيارة w3schools لمعرفة المزيد عن HTML وCSS

نظام HEX أو RGB للألوان

يعد نظام HEX ونظام RGB طريقتين مختلفتين يمكن من خلالهما تحديد اللون.

• يحدد نظام RGB اللون حسب القدر المستخدم من اللون الأحمر (R) والأخضر (G) والأزرق (B). على سبيل المثال، يمكن تعريف درجة اللون الأحمر على أنه RGB (253، 2، 2).
• يعد نظام HEX بمثابة تنسيق سداسي عشري يحدد اللون من خلال قيم الأحمر والأخضر والأزرق في مجموعة من ستة أحرف وأرقام.  تبدأ السداسية العشرية بالرقم أو رمز الهاشتاج (#). على سبيل المثال، سيتم تحديد نفس درجة اللون الأحمر على أنها #fd0202.

تعد الطريقة السداسية العشرية الطريقة الأكثر شيوعًا لتحديد الألوان على صفحات الويب.

أفضل ممارسات تباين النص

هناك العديد من التعديلات التي تتطلب مجهودًا أقل يمكنك إجراؤها لتحسين إمكانية قراءة النص.

• استخدم الخطوط ذات التأثيرات العريضة للحروف.
• استخدم حجم الخط الذي يبلغ 12 بكسل على الأقل. إذا كنت تستخدم خطًا بتأثيرات حروف رفيعة، فاستخدم 16 بكسل على الأقل.
• استخدم الخطوط "الرفيعة" فقط على الخلفيات الداكنة.
• استخدم نصًا بلون فاتح في الخلفيات الداكنة.
• استخدم نصًا بلون داكن في الخلفيات الفاتحة.
• تجنب تركيبات هذه الألوان:
  • الأخضر والأحمر
  • الأخضر والبني
  • الأزرق والبنفسجي
  • الأخضر والأزرق
  • الأخضر الفاتح والأصفر
  • الأزرق والرمادي
  • الأخضر والرمادي
  • الأخضر والأسود

ألست متأكدًا مما إذا كان النص يحتوي على تباين كافٍ؟ استخدم Colour Contrast Analyser من Paciello Group للتحقق من المحتوى.

لماذا يعد تباين النص أمرًا مهمًا؟

قد يصعب قراءة النص منخفض التباين في العديد من المواقف.

• عند العرض في الفصل
• للطلاب الذين يعانون من عمى الألوان
• على الهاتف المحمول مع وجود ضوء ساطع أو وهج على الشاشة
• على شاشات العرض منخفضة الجودة

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

يعني التباين الجيد أنه يمكن للجميع رؤية النص بوضوح والاستمتاع بتجربة أفضل بشكل عام أثناء قراءة المحتوى الخاص بك.