طريقة الاستخدام
- اكتب لون النص في لون النص، واللون الذي خلفه في لون الخلفية.
- اقرأ نسبة التباين. تبيّن الفحوص الأربعة للنص وفحص المكونات المستويات التي يبلغها الزوج.
- للنص الأساسي استهدف AA، النص العادي. ويحتاج النص الكبير إلى تباين أقل، والأحجام مذكورة في الأقسام أدناه.
- إذا فشل فحص، فابدأ من لون النص المقترح، واختبر النتيجة في تصميمك الفعلي.
كيف تُحسب النسبة
يعطي WCAG 2.2 كل لون سطوعاً نسبياً. تُجعل قيمة كل من الأحمر والأخضر والأزرق خطية أولاً: القيمة التي لا تتجاوز 0.04045 (على مقياس من 0 إلى 1) تُقسم على 12.92، والأكبر منها يُرفع إلى القوة 2.4 بعد إضافة 0.055 والقسمة على 1.055. ثم تُرجَّح النتائج الثلاث بالأوزان 0.2126 للأحمر و0.7152 للأخضر و0.0722 للأزرق. ونسبة التباين هي سطوع اللون الأفتح زائداً 0.05، مقسوماً على سطوع اللون الأغمق زائداً 0.05.
تتراوح النتيجة من 1، لأن اللونين متطابقان، إلى 21، لأسود على أبيض.
L = 0.2126 × R + 0.7152 × G + 0.0722 × B
النسبة = (L1 + 0.05) ÷ (L2 + 0.05)
L1 سطوع اللون الأفتح
L2 سطوع اللون الأغمقالمستويات
يضع WCAG 2.2 هذه الحدود الدنيا للنسب. وتُذكر المستوى ومعيار النجاح لتبحث عن الصياغة الدقيقة.
- AA، النص العادي: 4.5:1 (معيار النجاح 1.4.3).
- AA، النص الكبير: 3:1، للنص بحجم 18 نقطة، أو 14 نقطة إذا كان عريضاً (1.4.3).
- AAA، النص العادي: 7:1 (معيار النجاح 1.4.6).
- AAA، النص الكبير: 4.5:1 (1.4.6).
- الأزرار والحدود والأيقونات التي يحتاجها القارئ لاستعمال الصفحة: 3:1 (1.4.11).
ما لا تغطيه الأداة
- النص فوق الصور والمقاطع والتدرجات: تتغير الخلفية عبر النص، فافحص البكسلات الفعلية هناك.
- الألوان الشفافة: أدخل اللون الذي يراه القارئ فعلاً على الصفحة.
- حالات التمرير والتركيز وغيرها: افحص ألوان كل حالة كذلك.
- هل النص كبير بالنسبة للقارئ: يحدد ذلك حجم الخط ووزنه، والصفحة لا تعرفهما.
مثال محلول: رمادي #777 على أبيض
الرمادي #777 قيمة كل قناة فيه 119 من 255، فيعطي سطوعاً نسبياً نحو 0.184. والأبيض سطوعه 1، فتكون النسبة (1 + 0.05) ÷ (0.184 + 0.05) = 4.48.
إذن #777 على الأبيض يفشل في AA للنص العادي بهامش صغير، ويجتاز AA للنص الكبير وفحص 3:1 للمكونات، ويفشل في AAA. وأقرب رمادي أغمق يجتاز AA هو #767676، بنسبة 4.54.
| الفحص | المطلوب | #777 على أبيض |
|---|---|---|
| AA، النص العادي | 4.5:1 | 4.48: يفشل |
| AA، النص الكبير | 3:1 | يجتاز |
| AAA، النص العادي | 7:1 | يفشل |
| AAA، النص الكبير | 4.5:1 | يفشل |
| الأزرار والحدود والأيقونات | 3:1 | يجتاز |
الأسئلة الشائعة
ما نسبة التباين التي يحتاجها النص الأساسي؟
في المستوى AA من WCAG 2.2 يحتاج النص العادي 4.5:1 على الأقل، ويحتاج النص الكبير 3:1. ويطلب المستوى AAA نسبة 7:1 للنص العادي و4.5:1 للنص الكبير.
لماذا تظهر نسبة 4.4999 بالشكل 4.50 وتبقى راسبة؟
يستعمل الفحص النسبة الدقيقة، لا المنزلتين العشريتين اللتين تظهران على الشاشة. فالنسبة التي تقل عن 4.5 بقليل تُقرَّب إلى 4.50 عند العرض، لكنها لا تبلغ 4.5:1، فيفشل الفحص.
هل يغيّر ترتيب اللونين النسبة؟
لا. تكون النسبة نفسها أياً كان اللون نصاً وأياً كان خلفية، لأن اللون الأفتح هو البسط دائماً.
ما هو اللون المقترح؟
هو لون النص الأقرب إلى لونك في السطوع، والذي يبلغ 4.5:1 على خلفيتك. يحتفظ بالدرجة اللونية نفسها والتشبّع نفسه، ويكون أغمق أو أفتح، أيهما كان التغيير فيه أصغر.
هل أستطيع إدخال لون شفاف؟
ليس هنا. أدخل اللون الذي يراه الزائر فعلاً، أي اللون الشفاف بعد أن يُخلط بالخلفية التي خلفه.
هل تُرسل ألواني إلى خادم؟
لا. يعمل الحساب داخل متصفحك، ولا يُخزَّن ما تدخله ولا يُرسل.
هل تعني النسبة الناجحة أن النص سهل القراءة؟
ليس دائماً. النسبة هي الحد الأدنى الذي يضعه WCAG. ويهم أيضاً حجم الخط ووزنه والمسافات بين الأسطر وقدرة نظر القارئ، فاختبر التصميم الفعلي مع أشخاص حيث أمكن.
المصادر
- WCAG 2.2: Web Content Accessibility Guidelines، معايير النجاح والمسرد (باللغة الإنجليزية)
- WCAG 2.2 glossary: relative luminance and contrast ratio (باللغة الإنجليزية)
آخر مراجعة للأرقام والنص: الثلاثاء، 30 جمادى الأولى 1448 بعد الهجرة.