تصميم · مدة القراءة: 3 د ·
تباين الألوان وWCAG: كيف تجعل النص سهل القراءة
ما معنى نسبة تباين 4.5:1، وأي نص يحتاج إلى AA أو AAA، وحلول سريعة لأزواج الألوان التي تفشل في أغلب الأحيان.
النص الرمادي الفاتح على الأبيض يبدو أنيقًا في ملف التصميم، لكنه صعب القراءة على هاتف تحت الشمس، أو لعيون كبار السن، أو لضعاف البصر. تحوّل إرشادات إتاحة الويب WCAG كلمة «مقروء» إلى رقم يمكن التحقق منه.
نسبة التباين
التباين نسبة من 1:1 (اللون نفسه) إلى 21:1 (أسود على أبيض). يعتمد على السطوع النسبي، أي مدى سطوع كل لون في نظر العين، حيث يُحسب الأخضر أكثر من غيره والأزرق أقل. لذلك يكاد النص الأصفر على الأبيض لا يُرى، بينما يُقرأ الأزرق على الأبيض جيدًا.
العتبات
نص عادي نص كبير
AA (الحد الأدنى) 4.5:1 3:1
AAA (المعزّز) 7:1 4.5:1
النص الكبير = 24px على الأقل، أو 18.66px بخط عريضAA هو المستوى الذي تشير إليه معظم قوانين وسياسات الإتاحة، لذا اعتبره الحد الأدنى. ويستحق AAA السعي إليه في نصوص القراءة الطويلة. والأيقونات وحدود حقول الإدخال ومؤشرات التركيز التي تحمل معنى تحتاج إلى 3:1 على الأقل وفق WCAG 2.1.
أزواج تفشل كثيرًا
النص الرمادي في حقول الإدخال، والنص الأبيض على ألوان العلامات التجارية الزاهية مثل البرتقالي أو الأصفر أو الأخضر الفاتح، والنص فوق الصور. قد تكون الفروق ضئيلة: #777777 على الأبيض يعطي نحو 4.48:1، أقل بقليل من AA، بينما #767676 يعطي نحو 4.54:1 وينجح.
حلول سريعة
اجعل النص أو الخلفية أغمق بدرجة أو درجتين بدلًا من تغيير درجة اللون؛ فالتغييرات الصغيرة في الإضاءة تحرّك النسبة كثيرًا. اجعل التسميات على الأزرار الزاهية كبيرة وعريضة، أو استخدم نصًا داكنًا بدل الأبيض. وعلى الصور، ضع طبقة داكنة خلف النص.
التباين ليس قاعدة اللون الوحيدة
تنص WCAG أيضًا على ألا يكون اللون الوسيلة الوحيدة لنقل المعلومة. حقل نموذج يُعلَّم بأنه خاطئ بإطار أحمر فقط، أو رسم بياني يميّز خطوطه باللون وحده، يخذل المصابين بعمى الألوان، أي نحو رجل من كل 12. أضف أيقونة أو تسمية نصية أو نقشًا أو نمط خط مختلفًا.
الوضع الداكن
تنطبق النسب نفسها على الخلفيات الداكنة. النص الأبيض الخالص على الأسود الخالص يبلغ 21:1، لكنه قد يبدو قاسيًا ويجعل الحروف تبدو متوهجة لبعض القراء؛ أما الرمادي الفاتح على رمادي داكن جدًا فما زال يجتاز AA بسهولة وهو أريح للقراءة الطويلة. افحص السمتين كلتيهما، لأن زوجًا ينجح في الوضع الفاتح كثيرًا ما يفشل عند عكس الألوان.
النص فوق الصور والتدرجات
فوق صورة أو تدرج لوني تتغير الخلفية خلف كل حرف. قِس التباين مقابل أفتح جزء من الخلفية خلف النص، لا مقابل المتوسط. طبقة داكنة شبه شفافة أو شريط مصمت خلف النص تجعل النتيجة متوقعة.
ما القادم
تستكشف مسودة WCAG 3 طريقة تباين جديدة اسمها APCA تراعي حجم الخط وسماكته بدقة أكبر. لكنها ما زالت مسودة: القوانين وعمليات التدقيق اليوم تشير إلى WCAG 2.1 و 2.2، لذا تبقى عتبتا 4.5:1 و 3:1 هما المطلوبتين.
تحقّق من زوج ألوان
يعرض مدقق تباين الألوان من 4Dev النسبة لأي لون نص وخلفية، مع معاينة حية ونتيجة نجاح أو فشل لمستويي AA وAAA، للنص العادي والكبير. يستخدم الحساب معادلة WCAG 2 ويجري داخل متصفحك.