تباين الألوان هو الفرق في السطوع بين النص وخلفيته. هو من أكثر مشكلات إمكانية الوصول انتشارًا في المواقع، وأسهلها إصلاحًا. لا يتعلق الأمر بضعاف البصر فقط: كل شخص يقرأ على هاتف تحت شمس الخليج، أو على شاشة منخفضة السطوع، أو بعد يوم عمل طويل، يستفيد من تباين جيد. هذا الدليل يشرح معايير WCAG، وطريقة الحساب، وكيف تبني لوحة ألوان مقروءة.
معايير WCAG للتباين
إرشادات إمكانية الوصول لمحتوى الويب (WCAG 2.1 و2.2) تحدد النسب التالية:
| العنصر | المستوى AA | المستوى AAA |
|---|---|---|
| نص عادي | 4.5:1 | 7:1 |
| نص كبير (≥ 24 بكسل، أو ≥ 18.66 بكسل عريض) | 3:1 | 4.5:1 |
| عناصر الواجهة والرسوم ذات المعنى | 3:1 | — |
| نص الشعارات والزخرفة والعناصر المعطلة | لا شرط | لا شرط |
- النسبة تتراوح من 1:1 (لونان متطابقان) إلى 21:1 (أسود على أبيض).
- AA هو المستوى المطلوب عادةً في القوانين والسياسات (مثل معايير المواقع الحكومية في كثير من الدول).
- “النص الكبير” يُعرَّف بـ 18 نقطة أو 14 نقطة عريضة، وتعادل تقريبًا 24 و18.66 بكسل.
كيف تُحسب النسبة؟
- حوّل كل قناة لونية (R، G، B) من 0–255 إلى 0–1.
- طبّق تصحيح جاما: إذا كانت القيمة ≤ 0.04045 اقسمها على 12.92، وإلا ((القيمة + 0.055) ÷ 1.055)^2.4.
- احسب السطوع النسبي: L = 0.2126 R + 0.7152 G + 0.0722 B.
- النسبة = (L الأفتح + 0.05) ÷ (L الأغمق + 0.05).
لاحظ الوزن الكبير للأخضر (0.7152) والصغير للأزرق (0.0722): العين أحسّ بالأخضر، ولذلك يبدو الأزرق الداكن أغمق من الأخضر بالقيمة نفسها.
أمثلة على خلفية بيضاء
| لون النص | النسبة | AA نص عادي |
|---|---|---|
#000000 |
21:1 | ✓ |
#595959 |
7.0:1 | ✓ (و AAA) |
#767676 |
4.54:1 | ✓ بالكاد |
#777777 |
4.48:1 | ✗ |
#1a73e8 (أزرق) |
4.51:1 | ✓ بالكاد |
#2e7d32 (أخضر داكن) |
5.13:1 | ✓ |
#006c35 (أخضر داكن) |
6.57:1 | ✓ |
#d4af37 (ذهبي) |
2.1:1 | ✗ |
مثال: زر برتقالي
خلفية #ff9800:
- نص أبيض: 2.16:1 ✗ حتى للنص الكبير.
- نص أسود: 9.74:1 ✓.
كثير من المصممين يضعون نصًا أبيض على الأزرار البرتقالية والصفراء والخضراء الفاتحة، وهي غالبًا لا تجتاز المعيار.
أداة فحص التباين تحسب النسبة لأي لونين وتعرض نتيجة AA وAAA مباشرة.
صيغ الألوان: HEX وRGB وHSL
| الصيغة | مثال | متى تستخدمها |
|---|---|---|
| HEX | #1a73e8 |
الأشيع في CSS وأدوات التصميم |
| RGB | rgb(26, 115, 232) |
عند الحاجة لشفافية: rgb(26 115 232 / 0.5) |
| HSL | hsl(214, 82%, 51%) |
لتعديل السطوع والتشبع بسهولة |
HSL مفيد للتباين: لتغميق لون حتى يجتاز المعيار، اخفض قيمة L (الإضاءة) مع إبقاء H (التدرج) ثابتًا، فيبقى “اللون نفسه” بدرجة أغمق. محول الألوان يحول بين الصيغ الثلاث.
:root {
--brand: hsl(214 82% 51%); /* للأزرار الكبيرة */
--brand-text: hsl(214 82% 40%); /* للروابط والنص الصغير */
}بناء لوحة ألوان مقروءة
- ابدأ بلونين للنص: أساسي (تباين ≥ 7:1) وثانوي (≥ 4.5:1).
- لكل لون علامة تجارية، أنشئ درجة “للنص” أغمق وأخرى “للخلفيات” أفتح.
- اختبر الأزرار في كل حالاتها: عادي، تمرير، ضغط، تركيز.
- لا تعتمد على اللون وحده: رسالة الخطأ باللون الأحمر يجب أن يرافقها نص أو أيقونة، لأن نحو 8% من الرجال لديهم شكل من عمى الألوان.
- الوضع الداكن: لا تستخدم أبيض نقيًا على أسود نقي لنصوص طويلة؛
#e6e6e6على#121212مريح ويحقق تباينًا عاليًا.
كيف تختبر التباين عمليًا؟
- أدوات المطور في المتصفح: Chrome وEdge يعرضان نسبة التباين عند فحص أي نص، مع علامة اجتياز AA وAAA.
- Lighthouse: تقرير “إمكانية الوصول” يسرد العناصر ذات التباين المنخفض في الصفحة.
- محاكاة عمى الألوان: من أدوات المطور (Rendering ← Emulate vision deficiencies) لتتأكد أن الأحمر والأخضر ليسا الفارق الوحيد بين الحالات.
- اختبار الواقع: افتح الصفحة على هاتف بسطوع منخفض في مكان مضيء.
ماذا عن APCA؟
خوارزمية APCA طريقة أحدث لحساب التباين المدرك، تأخذ حجم الخط ووزنه في الحسبان، وهي مقترحة ضمن مسودات WCAG 3 التي لم تصبح معيارًا نهائيًا بعد. حتى ذلك الحين، تبقى نسب WCAG 2 المرجع في المتطلبات والعقود والتدقيق.
الخطوط العربية والتباين
- النقاط والتشكيل عناصر صغيرة جدًا؛ تختفي أولًا مع التباين المنخفض أو الخط الرفيع.
- الأوزان الرفيعة (Light/Thin) في الخطوط العربية تحتاج تباينًا أعلى من الحد الأدنى بكثير؛ تجنبها في النصوص الطويلة.
- الحجم: النص العربي يبدو أصغر من اللاتيني بالحجم نفسه في كثير من الخطوط؛ 16–18 بكسل كحد أدنى لنص المحتوى.
- النص فوق الصور: أضف طبقة داكنة شبه شفافة خلف النص، فتباين النص فوق صورة متغيرة لا يمكن ضمانه.
التباين وتحسين محركات البحث
جوجل لا يعتبر التباين عامل ترتيب مباشرًا، لكن أداة Lighthouse تفحصه ضمن تقييم إمكانية الوصول، وصعوبة القراءة ترفع معدل الارتداد. وتحسين تجربة الصفحة عمومًا موضوع دليل تسريع الموقع.
التباين في الطباعة والعروض التقديمية
القواعد نفسها تنفع خارج الويب: العروض التقديمية على جهاز إسقاط في قاعة مضيئة تفقد كثيرًا من التباين، فاختر خلفية داكنة مع نص فاتح أو العكس بفارق كبير. وفي المطبوعات والإعلانات الخارجية، الألوان الباهتة تزداد بهتانًا تحت الشمس.
أخطاء شائعة
- الرمادي الفاتح للنص الثانوي:
#999على الأبيض نسبته نحو 2.8:1 فقط. - النص الأبيض على الألوان الزاهية (برتقالي، أصفر، أخضر فاتح).
- نص العناصر النائبة (placeholder) الباهت جدًا داخل الحقول.
- حدود حقول الإدخال بلون فاتح لا يحقق 3:1.
- الاعتماد على العين: شاشتك عالية الجودة لا تمثل كل المستخدمين؛ قِس النسبة دائمًا.
قائمة تحقق
- كل النصوص ≥ 4.5:1، والكبيرة ≥ 3:1.
- الأيقونات وحدود الحقول ومؤشر التركيز ≥ 3:1.
- لا معلومة تعتمد على اللون وحده.
- الوضعان الفاتح والداكن مختبران.
- النصوص العربية بوزن عادي فأكثر وحجم مريح.