كيف تختبر تباين الألوان وإمكانية قراءة النصوص في موقعك؟

ما المقصود بتباين الألوان؟

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

قد يكون لونان مختلفين في الدرجة اللونية لكنهما متقاربان في السطوع، فيصعب تمييز النص. لهذا لا يكفي أن تختار لونين من عائلتين مختلفتين؛ اختبر الزوج الفعلي الذي سيظهر في الصفحة.

ما النسب التي ينبغي استهدافها؟

تحدد إرشادات WCAG 2.2 المستوى AA حدًا أدنى لتباين النصوص. استخدم الجدول التالي عند مراجعة تصميمك:

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

خطوات اختبار التباين عمليًا

1. اختر زوج الألوان الصحيح: حدّد لون النص ولون الخلفية اللذين يظهران معًا فعلًا، بما في ذلك الخلفيات داخل البطاقات والنوافذ والأزرار.
2. أدخل القيم في أداة فحص: استخدم رموز HEX مثل #222222 للنص و#FFFFFF للخلفية، أو أدخل قيم RGB إذا كانت هذه هي القيم المعتمدة في CSS.
3. اقرأ النسبة والنتيجة: قارن النسبة بحد النص المناسب. لا تقرّب نتيجة قريبة من الحد؛ فالقيمة الأقل قليلًا من 4.5:1 لا تحقق ذلك الحد.
4. عدّل لونًا واحدًا في كل مرة: جرّب جعل النص أغمق أو الخلفية أفتح، ثم أعد الفحص. لا تغيّر لون العلامة التجارية بالكامل إن كان تعديل صغير يحقق النتيجة.
5. اختبر الحالات المختلفة: افحص النص العادي والروابط والنص داخل الأزرار والتلميحات وحالات التحويم والتركيز، وليس لون الفقرة الرئيسية فقط.

يمكنك البدء باستخدام أداة فحص تباين الألوان في الموقع، ثم إعادة الاختبار داخل الصفحة الحقيقية بعد تطبيق الألوان.

مثال CSS: تحسين نص منخفض التباين

افترض أن التصميم يستخدم نصًا رماديًا فاتحًا على خلفية بيضاء. قد يبدو ذلك خفيفًا وبسيطًا، لكنه يصبح مرهقًا عند قراءة فقرات طويلة. اجمع ألوان النصوص في متغيرات CSS لتسهيل تعديلها وفحصها باستمرار:

:root {
  --page-bg: #ffffff;
  --text-main: #202124;
  --text-muted: #4b5563;
  --link-color: #0759b5;
  --border-color: #6b7280;
}

body {
  color: var(--text-main);
  background: var(--page-bg);
}

.article-muted {
  color: var(--text-muted);
}

a {
  color: var(--link-color);
  text-decoration: underline;
}

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

لا تفحص الألوان وحدها: اختبر قابلية قراءة النص

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

• حجم النص: اجعل نص المقال مريحًا للقراءة ولا تجبر الزائر على التكبير لقراءة المحتوى الأساسي.
• ارتفاع السطر: امنح الفقرات مساحة رأسية كافية حتى لا تتداخل الأسطر بصريًا.
• عرض الفقرة: تجنب الأسطر الطويلة جدًا؛ قسّم الأفكار الكبيرة إلى فقرات قصيرة بعناوين مفيدة.
• وزن الخط: قد يظهر الخط الرفيع باهتًا حتى لو كانت نسبة التباين مقبولة؛ جرّب وزنًا أوضح.
• الروابط والحالات التفاعلية: تأكد من ظهور الرابط ومؤشر التركيز بوضوح، ولا تجعل الحالة المهمة تعتمد على اللون فقط.
• التكبير وإعادة التدفق: كبّر النص وتحقق من عدم اختفاء المحتوى أو اضطرار المستخدم إلى التمرير أفقيًا لقراءة الفقرات.

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

اختبر الموقع كاملًا وليس لقطة التصميم

قد تتغير الألوان بين الوضع الفاتح والداكن، أو داخل بطاقة لها خلفية مختلفة، أو عند ظهور رسالة خطأ. افتح صفحات فعلية وراجع العناصر التالية:

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

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

كيف تفسّر نتيجة أداة التباين؟

عندما تعرض الأداة نسبة مثل 3.2:1، لا تعني النتيجة أن التصميم سيئ في كل الأحوال؛ بل عليك تحديد نوع العنصر أولًا. إذا كانت النسبة تخص فقرة عادية، فهي أقل من حد 4.5:1 المطلوب في WCAG AA. أما إذا كانت تخص عنوانًا كبيرًا، فقد تتجاوز الحد الأدنى 3:1. لذلك لا تستخدم نتيجة واحدة لتقييم جميع النصوص في الموقع.

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

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

ماذا تفعل مع الصور والتدرجات والوضع الداكن؟

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

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

:root {
  color-scheme: light;
  --surface: #ffffff;
  --text: #202124;
  --muted: #4b5563;
}
[data-theme="dark"] {
  color-scheme: dark;
  --surface: #111827;
  --text: #f9fafb;
  --muted: #d1d5db;
}
body {
  color: var(--text);
  background: var(--surface);
}

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

خطة اختبار قصيرة يمكن تكرارها مع كل إصدار

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

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

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

أخطاء شائعة عند اختيار الألوان

• اختيار الرمادي الفاتح للنصوص الثانوية ثم استخدامه في فقرات طويلة.
• اعتبار اللون وحده كافيًا لتمييز الروابط أو رسائل النجاح والخطأ.
• فحص لون النص على خلفية بيضاء، مع أن الصفحة تعرضه فوق خلفية رمادية أو صورة.
• اختبار العنوان الكبير فقط ونسيان التسميات الصغيرة والنصوص داخل الأزرار.
• تغيير لون واحد في CSS دون مراجعة الصفحات التي تستخدمه في سياقات مختلفة.
• الاعتماد على أداة واحدة دون اختبار الصفحة على الهاتف أو في الوضع الداكن.

قائمة فحص سريعة قبل النشر

• كل نص عادي يحقق نسبة تباين 4.5:1 على الأقل.
• النص الكبير يحقق نسبة 3:1 على الأقل.
• الروابط واضحة بصريًا ولا تعتمد على اللون وحده.
• النص قابل للقراءة عند تكبيره، ولا ينكسر تخطيط الصفحة.
• الأزرار والحقول وحالات التركيز ظاهرة بوضوح.
• تم اختبار الوضعين الفاتح والداكن، إن كانا متاحين.
• تمت مراجعة الصفحة الفعلية بعد تطبيق CSS، لا لوحة الألوان وحدها.

الخلاصة

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

ما أول عنصر في موقعك ستراجعه: نصوص المقالات، أم الروابط، أم الأزرار؟

الكاتب: imad limrani

مصادر موثوقة

• W3C: Understanding Contrast (Minimum)
• MDN: Color contrast
• W3C: WCAG 2.2