اختبر تباين النص والخلفية في ثوانٍ
هل تخشى أن يكون النص صعب القراءة على الخلفية؟ هل لا تعرف إن كان تنسيق ألوانك يجتاز معايير إمكانية الوصول؟ لا تقلق يا صديقي! أنت في المقال السليم، لأننا سنتعرف اليوم على أداة مجانية بشكل كامل تفحص WCAG 2.2 وAPCA جنباً إلى جنب، وتقترح عليك الحل بنفسها.
لن نطيل عليكم ونتوجه مباشرة إلى معرفة ما هي نسبة التباين، وكيف تستخدم هذه الأداة، وما الذي تقدمه بشكل ممتاز وأين تقف حدودها. والأفضل من ذلك أنك تستطيع تجربة ألوانك بنفسك في الأداة بالأعلى.
ما هو فاحص تباين الألوان ولماذا تهمنا نسبة التباين؟
فاحص تباين الألوان يقارن سطوع لون النص بسطوع اللون الذي خلفه، ثم يعطيك رقماً يسمى نسبة التباين. يبدأ هذا الرقم من 1:1 (لا فرق إطلاقاً) وينتهي عند 21:1 (الأسود على الأبيض). وكلما ارتفع الرقم، أصبح النص أسهل في القراءة.
من وجهة نظري الشخصية، هذا من أكثر الأجزاء التي يتجاهلها المصممون عند بناء المواقع. نص رمادي فاتح على صفحة بيضاء يبدو أنيقاً على شاشتك الكبيرة، لكنه يتحول إلى معاناة على هاتف رخيص تحت أشعة الشمس، أو لمن يعاني من ضعف في الإبصار. فحص التباين الصحيح يأخذ ثواني معدودة، ويوفر على قرائك الكثير من الإجهاد.
متطلبات WCAG للتباين: الفرق بين AA وAAA باختصار
معيار WCAG هو المرجع الذي تعتمد عليه أغلب القوانين وعمليات التدقيق. والمعادلة نفسها في الإصدارات 2.0 و2.1 و2.2، لذا يكفيك أن تتذكر هذه الأرقام:
| نوع المحتوى | AA (الحد الأدنى) | AAA (المستوى المعزز) |
|---|---|---|
| النص العادي | 4.5:1 | 7:1 |
| النص الكبير (24px، أو 18.66px بخط عريض) | 3:1 | 4.5:1 |
| عناصر الواجهة (الأزرار وحدود حقول الإدخال) | 3:1 | لا ينطبق |
أعجبتني نقطة صغيرة هنا: الأداة لا تقرّب النسب لأعلى أبداً، فالنسبة 4.499 تعني رسوباً، وهذا هو الصحيح تماماً.
أبرز مميزات أداة فاحص تباين الألوان WCAG
WCAG 2.2 وAPCA معاً
شاهد النسبة الكلاسيكية ودرجة Lc الأحدث جنباً إلى جنب.
حلول بنقرة واحدة
احصل على ألوان قريبة تجتاز AA أو AAA، لتحافظ على روح لون علامتك.
محاكاة عمى الألوان
شاهد زوجك اللوني كما يراه المصاب بعمى الأحمر أو الأخضر أو الأزرق أو بالرؤية أحادية اللون.
نص فوق صورة أو تدرج
اسحب مربع نص فوق صورة، واختبره مقابل كل بكسل خلفه.
تدقيق لوحة الألوان
الصق حتى 10 ألوان HEX وشاهد كل تركيبة بين النص والخلفية في جدول واحد.
منشئ لوحة ألوان متاحة
أنشئ تدرجاً لونياً مع رموز للوضعين الفاتح والداكن، وصدّره بصيغة CSS أو Tailwind أو JSON.
وتعمل الأداة بشكل كامل داخل متصفحك، لذا تبقى ألوانك وصورك خاصة بك.
طريقة فحص تباين الألوان خطوة بخطوة
- قم بزيارة فاحص تباين الألوان من قائمة أدوات الألوان.
- أدخل لون النص ولون الخلفية بصيغة HEX، أو استخدم منتقي الألوان.
- اقرأ النسبة وشارات النجاح والرسوب لمستويات AA وAAA والنص الكبير وعناصر الواجهة.
- راجع المعاينة المباشرة لترى كيف يبدو الزوج في الواقع.
- انظر إلى الحلول السريعة أسفل النتيجة.
- اختر تعديل لون النص، أو الخلفية، أو التحويل إلى زوج للوضع الداكن.
- اضغط على الحل لتطبيقه وشاهد النسبة تتحدث فوراً.
- ثبّت الزوج إذا أردت إضافته إلى تقريرك.
- الصق ألوان علامتك في خانة تدقيق لوحة الألوان.
- تأمل الجدول: الصفوف هي ألوان النص والأعمدة هي الخلفيات.
- اضغط على أي خلية لفحص ذلك الزوج بالتفصيل.
- صدّر النتيجة النهائية بصيغة CSS أو Tailwind أو JSON.
WCAG مقابل APCA: أي طريقة تباين تعتمد عليها؟
معيار WCAG 2.x هو ما تعتمد عليه القوانين اليوم. أما APCA فهو نموذج إدراكي مقترح ضمن WCAG 3، يأخذ حجم الخط ووزنه بالحسبان، ويعامل الوضع الداكن بشكل مختلف عن الوضع الفاتح. وما زال مسودة، لذا نصيحتي بسيطة: اجتز WCAG أولاً، ثم استخدم APCA كرأي ثانٍ. هذه الأداة تعرض الاثنين معاً، فتوفر عليك التنقل بين موقعين.
تباين الألوان والامتثال لمعايير إمكانية الوصول (ADA وEAA)
قانون إمكانية الوصول الأوروبي ساري منذ 28 يونيو 2025، ويشير إلى المعيار EN 301 549 المبني على WCAG 2.1 AA. وفي الولايات المتحدة، تعتمد قاعدة ADA Title II معيار WCAG 2.1 AA للحكومات المحلية وحكومات الولايات، وكثيراً ما تتخذ المحاكم WCAG مرجعاً في القضايا الخاصة أيضاً. لست محامياً، وفحص التباين وحده لا يثبت الامتثال، لكنه أسرع إنجاز تستطيع تحقيقه في أي قائمة لإمكانية الوصول.
المميزات والعيوب
الإيجابيات
- WCAG 2.2 وAPCA في مكان واحد.
- حلول تبقي ألوان علامتك قريبة من الأصل.
- محاكاة عمى الألوان وتدقيق للوحة الألوان.
- خصوصية كاملة، فكل شيء يعمل داخل متصفحك.
ضع في بالك
- التباين جزء واحد فقط من إمكانية الوصول.
- معيار APCA ما زال مسودة.
- محاكاة عمى الألوان تقريب وليست فحصاً طبياً.
من يحتاج إلى فاحص التباين هذا؟
مصممو المواقع، ومصممو واجهات وتجربة المستخدم، ومطورو الواجهات الأمامية، والمدونون، وكل من يبني علامة تجارية. إذا كنت تختار ألواناً لأي شيء يقرؤه الناس، فهذه الأداة لك. المبتدئ سيحب شارات النجاح والرسوب الواضحة، والمصمم المتمرس سيحب خيارات التصدير.
أسئلة شائعة حول تباين الألوان
ما هي نسبة تباين الألوان الجيدة؟
للنص العادي استهدف 4.5:1 على الأقل لتحقيق مستوى WCAG AA. ولقراءة أقوى، النسبة 7:1 تحقق مستوى AAA. أما النص الكبير فيحتاج إلى 3:1 لمستوى AA.
ما الحد الأدنى لنسبة التباين في WCAG AA؟
النسبة 4.5:1 للنص العادي، و3:1 للنص الكبير (24px بخط عادي أو 18.66px بخط عريض فأكثر)، و3:1 لعناصر الواجهة مثل الأزرار وحدود حقول الإدخال.
ما هو APCA وهل سيحل محل WCAG؟
APCA نموذج إدراكي أحدث لقياس التباين، مقترح ضمن WCAG 3. ما زال مسودة، لذا استخدمه كرأي ثانٍ بينما يبقى WCAG 2.x هو المعيار الذي تعتمد عليه القوانين.
هل ينطبق تباين الألوان على الوضع الداكن؟
نعم. النص الفاتح على خلفية داكنة يجب أن يستوفي النسب نفسها، كما يعامل APCA النص الفاتح على الداكن بشكل مختلف عن الداكن على الفاتح، ولهذا من الذكي فحص الحالتين.
هل تُرفع بياناتي عند اختبار الصور أو الألوان؟
لا. الأداة تعمل داخل متصفحك، والصور التي تختارها تبقى على جهازك.
هل أستطيع فحص لوحة ألوان كاملة دفعة واحدة؟
نعم. الصق حتى 10 ألوان بصيغة HEX وسيعرض تدقيق اللوحة كل تركيبة بين النص والخلفية في جدول واحد.
الخلاصة:
فاحص تباين الألوان الجيد يجب أن يكون سريعاً وواضحاً وصادقاً، وهذه الأداة تجمع الثلاثة. تختبر WCAG 2.2 وAPCA معاً، وتعطيك حلولاً بدل التحذيرات فقط، وتحافظ على خصوصية بياناتك بشكل كامل. والحدود الحقيقية الوحيدة أن التباين جزء واحد من إمكانية الوصول، وأن APCA ما زال يتطور. نصيحتي: اختبر ألوان النص الرئيسية وألوان الأزرار اليوم، ثم دقق لوحة ألوانك كاملة.
كانت هذه هي مراجعتنا لأداة فاحص تباين الألوان WCAG. أتمنى أن تنال إعجابكم ورضاكم. نراكم قريباً جداً في مقال جديد وقيّم.