تباين الألوان عمليًا

01ما هو التباين ولماذا يهم

تباين الألوان هو الفرق في شدة الإضاءة بين لون المقدمة ولون الخلفية. تعبّر WCAG عنه بنسبة تبدأ من 1:1 (لا فرق) وتصل إلى 21:1 (أسود على أبيض).

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

02النسب التي يجب حفظها

• 4.5:1

  الحد الأدنى للنص العادي (WCAG 1.4.3، المستوى AA).

• 3:1

  الحد الأدنى للنص الكبير (WCAG 1.4.3، المستوى AA).

• 7:1

  التباين المعزّز للنص العادي (WCAG 1.4.6، المستوى AAA).

• 3:1 لغير النص

  الحد الأدنى لمكوّنات الواجهة والرسوم ذات المعنى (WCAG 1.4.11، المستوى AA).

تعرّف WCAG النص الكبير بأنه 18 نقطة فأكثر (نحو 24 بكسل CSS) أو 14 نقطة عريضة (نحو 18.5 بكسل CSS). أي نص أصغر يحتاج إلى 4.5:1 كاملة.

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

03الأخطاء الشائعة

• نص رمادي فاتح على الأبيض في التعليقات التوضيحية والأوقات والعناوين الثانوية.
• نص فوق الصور أو التدرجات حيث يتغير التباين من منطقة لأخرى. أضف طبقة لونية صلبة أو لوحة خلف النص.
• نص الإرشاد داخل الحقل (placeholder) الأفتح من حد الحقل. ما زال نصًا ويجب أن يحقق 4.5:1.
• حدود حقول باهتة تجعل الحقل يبدو جزءًا من خلفية الصفحة.

ألوان العلامة التجارية هي المشكلة غالبًا. احتفظ بدرجة أغمق منها للنص وأخرى أفتح للزخرفة.

04كيف تختبر

1. اختر لوني النص والخلفية وأدخلهما في أداة فحص التباين. تتضمن كثير من أدوات التصميم وأدوات مطوّري المتصفح أداة كهذه.
2. افحص كل الحالات: الافتراضية، والتحويم، والتركيز، والمحددة، والخطأ.
3. اختبر السمتين الفاتحة والداكنة. زوج الألوان الذي ينجح في إحداهما قد يفشل في الأخرى.
4. للنص فوق الصور، قِس أفتح وأغمق المناطق خلف النص.

هناك استثناءات: العناصر غير النشطة (المعطّلة)، والزخرفة البحتة، والشعارات وأسماء العلامات. لا تستخدم الاستثناء لنص ما زال المستخدم بحاجة إلى قراءته.

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

• سمِّ رموز الألوان بحسب الدور، مثل text-primary وtext-muted، حتى لا يختار أحد رمادًا فاتحًا بالعين.
• عرّف لون النص الخافت بحيث يبقى 4.5:1 على كل سطح يظهر عليه.
• أعد فحص التباين كلما تغيّر لون سطح، كخلفية البطاقة.

النسبة الناجحة حد أدنى لا غاية. النص الأكبر والأعرض أسهل قراءة حتى عندما تنجح النسبة أصلًا.

05المصادر

• W3C. Understanding SC 1.4.3 Contrast (Minimum). https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html
• W3C. Understanding SC 1.4.11 Non-text Contrast. https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html