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