فاحص التباين WCAG

حول فاحص التباين WCAG

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

تحسب الأداة نسبة التباين بين أي لونين باستخدام صيغة اللمعان النسبي الرسمية من W3C، وتبلغك فوراً ما إذا كانت التركيبة تجتاز مستويي الامتثال WCAG AA وWCAG AAA أم لا، للنص العادي والنص الكبير على حد سواء. تُنفَّذ جميع العمليات الحسابية لحظياً داخل متصفحك مباشرةً دون إرسال أي بيانات إلى أي خادم.

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

فهم متطلبات التباين في WCAG

تُعد إرشادات إمكانية الوصول إلى محتوى الويب (WCAG) المعيار المعترف به دولياً لإمكانية الوصول إلى الويب، وتنشرها مؤسسة World Wide Web Consortium (W3C). وتحدد WCAG حدوداً معينة لنسبة التباين لضمان وضوح النص للمستخدمين على اختلاف قدراتهم البصرية.

• مستوى WCAG AA (النص العادي): يُشترط حد أدنى لنسبة التباين يبلغ 4.5:1. وينطبق هذا على نص المتن والفقرات وأي نص أصغر من 18pt (24px) أو 14pt بالخط العريض (18.66px بالخط العريض).
• مستوى WCAG AA (النص الكبير): يُشترط حد أدنى لنسبة التباين يبلغ 3:1. ويُعرَّف النص الكبير بأنه النص الذي لا يقل حجمه عن 18pt (24px) أو 14pt بالخط العريض (18.66px بالخط العريض).
• مستوى WCAG AAA (النص العادي): يُشترط حد أدنى لنسبة التباين يبلغ 7:1. وهذا أعلى مستوى من المطابقة لإمكانية الوصول للنص ذي الحجم العادي.
• مستوى WCAG AAA (النص الكبير): يُشترط حد أدنى لنسبة التباين يبلغ 4.5:1 للنص الكبير عند مستوى المطابقة AAA.

يُعد استيفاء مستوى WCAG AA على الأقل المعيار الأساسي لتصميم الويب الذي يمكن الوصول إليه، وتشترطه أطر قانونية كثيرة حول العالم، منها قانون الأمريكيين ذوي الإعاقة (ADA) وقانون إمكانية الوصول الأوروبي والمادة 508 من قانون إعادة التأهيل. ويوفر مستوى WCAG AAA درجة أعلى من إمكانية الوصول يُوصى بها متى أمكن.

كيف تُحسب نسبة التباين

تُحدد نسبة التباين بين لونين باستخدام اللمعان النسبي لكل لون، كما هو معرَّف في مواصفات WCAG 2.1. ويقيس اللمعان النسبي السطوع المُدرَك للون على مقياس من 0 (أغمق أسود) إلى 1 (أفتح أبيض).

يتضمن الحساب ثلاث خطوات. أولاً، تُحوَّل كل قناة لونية (الأحمر والأخضر والأزرق) من قيمتها بنظام sRGB ذي 8 بتات (0-255) إلى قيمة sRGB مُطبَّعة (0-1) بالقسمة على 255. ثانياً، تخضع كل قيمة مُطبَّعة لـتصحيح غاما: فإذا كانت القيمة 0.04045 أو أقل، تُقسم على 12.92، وإلا فتُحوَّل باستخدام الصيغة ((value + 0.055) / 1.055) ^ 2.4. ثالثاً، تُجمع قيم القنوات الخطية بمعاملات موزونة: L = 0.2126 * R + 0.7152 * G + 0.0722 * B.

تُحسب نسبة التباين النهائية على النحو (L1 + 0.05) / (L2 + 0.05)، حيث L1 هو اللمعان النسبي للون الأفتح وL2 هو اللمعان النسبي للون الأغمق. والنتيجة قيمة تتراوح من 1:1 (لا تباين، لونان متطابقان) إلى 21:1 (أقصى تباين، أسود خالص على أبيض خالص).

الميزات الرئيسية

• حساب نسبة التباين لحظياً باستخدام صيغة اللمعان الرسمية في W3C WCAG 2.1
• مؤشرات النجاح والفشل لمستويي المطابقة WCAG AA وAAA للنص العادي والنص الكبير
• منتقي ألوان تفاعلي وإدخال بصيغة hex للونين، لون النص ولون الخلفية
• تبديل الألوان بنقرة واحدة لاختبار تركيبات الألوان المعكوسة
• عشر تركيبات ألوان جاهزة للاستخدام السريع، بما في ذلك أزواج شائعة يمكن الوصول إليها
• معاينة حية للنص توضح مظهر ألوانك بأحجام النص العادية والكبيرة
• اقتراح تلقائي لأقرب لون نص يجتاز الفحص عند فشل التركيبة الحالية
• تفاصيل اللمعان التقنية للونين، لون النص ولون الخلفية
• دعم كامل للوضع الداكن لاستخدام مريح في أي بيئة
• تتم جميع العمليات محلياً داخل المتصفح دون إرسال أي بيانات إلى خوادم خارجية

كيفية استخدام فاحص التباين WCAG

1. حدد لون النص: انقر على مربع منتقي الألوان أو اكتب قيمة hex (مثلاً #1A1A2E) في الحقل النصي لتحديد لون النص أو لون المقدمة.
2. حدد لون الخلفية: وبالمثل، استخدم منتقي الألوان أو إدخال hex لتحديد لون الخلفية خلف النص.
3. راجع النتائج: تُعرض نسبة التباين ونتائج النجاح والفشل لمستويات WCAG الأربعة فوراً أثناء تغيير الألوان.
4. تحقق من المعاينة الحية: مرّر للأسفل لرؤية نص فعلي معروض بتركيبة الألوان التي اخترتها بالحجمين العادي والكبير.
5. طبّق الاقتراحات: إذا لم تجتز التركيبة مستوى WCAG AA، يظهر لون نص مقترح. انقر على «تطبيق» لاستخدامه.
6. جرّب الإعدادات الجاهزة: استخدم «الإعدادات السريعة» لاختبار تركيبات ألوان معروفة يمكن الوصول إليها أو لا يمكن الوصول إليها.
7. بدّل الألوان: انقر على زر «تبديل الألوان» لعكس لون النص ولون الخلفية المحددين.

لماذا يهم التباين اللوني لإمكانية الوصول

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

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

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

الأسئلة الشائعة