تجعل النصوص المنخفضة التباين موقعك الإلكتروني أقل قابلية للقراءة لجميع المستخدمين، بل أكثر من ذلك للمستخدمين الذين يعانون من قصور في الرؤية. يمكن أن تعثر أدوات مطوّري البرامج تلقائيًا على مشاكل التباين المنخفض وتقترح ألوانًا أفضل لمساعدتك في حلها.
يمكنك استخدام "أدوات مطوري البرامج" لتنفيذ ما يلي:
- اكتشاف مشاكل التباين: استخدِم لوحة نظرة عامة على CSS أو علامة التبويب (معاينة) المشاكل أو تقرير Lighthouse للحصول على قائمة بجميع المشاكل.
- حلّ مشاكل التباين: اطّلِع على المشاكل من خلال تلميح في وضع أداة الفحص واختَر الألوان التي تقترحها أداة اختيار الألوان لإصلاح نسبة التباين.
- محاكاة قصور في الرؤية: انظر إلى موقعك الإلكتروني كما يراه المستخدمون.
التعرّف على النص المنخفض التباين
لاكتشاف النص المنخفض التباين:
- افتح "أدوات مطوري البرامج" على صفحتك. يمكنك الاطّلاع على صفحة العرض التوضيحي هذه في هذا البرنامج التعليمي.
احصل على قائمة بجميع مشكلات التباين باستخدام إحدى اللوحات الثلاث:
مشاكل التباين في لوحة "النظرة العامة على صفحات الأنماط المتتالية" (CSS)
للحصول على نظرة عامة:
- افتح نظرة عامة على CSS.
- عرض نظرة عامة:
- افتح قسم الألوان، وانتقِل إلى مشاكل التباين، وانقر على مشكلة، إن وُجدت.
في جدول مشاكل التباين، مرِّر مؤشر الماوس فوق عنصر وانقر على الرابط الذي يظهر بجانبه.
أصلِح المشكلة كما هو موضَّح في قسم إصلاح النص المنخفض التباين.
(معاينة) مشاكل التباين في علامة التبويب "المشاكل"
للحصول على قائمة بالمشاكل:
- فعِّل ميزة الإبلاغ عن مشاكل التباين في علامة التبويب المشاكل:
- افتح الإعدادات > ميزة تجريبية.
- في شريط الفلترة، ابحث عن "
contrast issue". - ضَع علامة في المربّع تفعيل الإبلاغ التلقائي عن مشاكل التباين من خلال لوحة "المشاكل".
- انقر على إعادة تحميل أدوات مطوري البرامج في الإشعار الذي يظهر في أعلى الصفحة.
- افتح علامة التبويب "المشاكل".
عليك توسيع مشاكل التباين التي عثرت عليها أدوات مطوّري البرامج، ثم توسيع جدول العناصر، والنقر على رابط بجانب العنصر.
أصلِح المشكلة كما هو موضَّح في قسم إصلاح النص المنخفض التباين.
مشاكل التباين في تقرير Lighthouse
لعرض تقرير:
- في "أدوات مطوري البرامج"، افتح
المزيد من علامات التبويب > Lighthouse. - أنشئ تقرير Lighthouse باستخدام الإعدادات التالية:
- الوضع: التنقل (تلقائي)
- الفئات: تسهيل الاستخدام
- الجهاز: الكمبيوتر المكتبي
- انقر على تحليل تحميل الصفحة وانتظِر إلى أن تُنشئ أداة Lighthouse التقرير.
- انتقِل للأسفل وصولاً إلى قسم التباين، وفي قائمة العناصر، انقر على رابط يؤدي إلى عنصر متأثّر.
- أصلِح المشكلة كما هو موضَّح في قسم إصلاح النص المنخفض التباين.
إصلاح النص المنخفض التباين
لحلّ مشكلة متعلقة بالتباين المنخفض:
- ابحث عن مشكلة في التباين وانقر على رابط يؤدي إلى العنصر المتأثر بالمشكلة في لوحة نظرة عامة على خدمة مقارنة الأسعار أو علامة التبويب المشاكل أو تقرير Lighthouse. ينقلك DevTools إلى لوحة العناصر ويختار العنصر المقابل.
على سبيل المثال، في هذه الصفحة التجريبية، أول عنصر متأثر هو h1.line1. انقر على
فحص في أعلى يسار صفحة "أدوات مطوري البرامج" ومرِّر مؤشر الماوس فوق العنصر في إطار العرض. تعرض "أدوات مطوري البرامج" تلميحًا لهذا العنصر.
لاحظ علامة التحذير
بجوار قيمة نسبة التباين في التلميح. تقيس نسبة التباين الفرق في السطوع بين ألوان المقدمة (لون النص) وألوان الخلفية.افتح أداة اختيار الألوان بجانب تعريف اللون لنص العنصر، وفي قسم منتقي الألوان، وسِّع قسم نسبة التباين.
تخبرك أداة اختيار الألوان بأن نسبة التباين لا تتوافق مع مستويَي AA أو AAA لإرشادات WebAIM.
انقر على الزرّ
استخدام اللون المقترَح بجانب مستوى AAA. تطبّق أداة اختيار الألوان لون النص الذي يتوافق مع إرشادات نسبة التباين.
بدلاً من ذلك، لاختيار لون يدويًا، يمكنك سحب الدائرة في معاينة الظلال. للبقاء ضمن مستوى AA أو AAA، اختَر لونًا أسفل السطر العلوي أو السفلي على التوالي.
وبالمثل، عليك حلّ جميع مشاكل التباين التي ظهرت لك في لوحة نظرة عامة على CSS أو علامة التبويب المشاكل أو تقرير Lighthouse.
احفظ التغييرات
لحفظ التغييرات التي أجريتها في "أدوات مطوّري البرامج"، اتّبِع الخطوات التالية:
- انسخ جميع تغييرات CSS دفعة واحدة والصقها في الرمز.
- يمكنك إعداد مساحة عمل تتيح لأدوات مطوّري البرامج حفظ الملفات مباشرةً في مصادرك.
ما هي الخطوات التالية؟
مزيد من المعلومات:
- معلومات حول تسهيل الاستخدام بشكل عام
- سهولة الوصول إلى الألوان والتباين على وجه الخصوص