مُحلّل التباين — أداة مجانية لحساب نسبة التباين وفق معايير WCAG

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

ما هو تباين الألوان ولماذا يهم؟

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

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

تتراوح النسبة من 1:1 (الألوان متطابقة، لا يوجد تباين) إلى 21:1 (الأسود النقي على الخلفية البيضاء النقيّة، أعلى تباين ممكن). معظم التصميمات القابلة للوصول تقع في المنتصف. النسبة 4.5:1 هي الحد الأدنى للنص العادي وفقًا لمعايير WCAG AA. 7:1 هي المعيار الأعلى AAA. هذه الأرقام ليست عشوائية — إنها تعتمد على أبحاث واسعة النطاق حول ما يمكن للأشخاص الذين يعانون من إعاقات بصرية مختلفة التمييز بينه.

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

كيفية استخدام مُحلّل التباين

اختبار مزيج الألوان يستغرق ثوانٍ. اختر لونين واحصل على نتيجة فورية.

1. اختر لونك الأمامي. هذا عادةً لون نصك. انقر على عينة اللون لفتح المُحدد الأصلي، أو أدخل رمز HEX مباشرة في حقل الإدخال.
2. اختر لون الخلفية. هذا هو السطح خلف نصك. استخدم نفس المُحدد أو أدخل رمز HEX يدويًا.
3. اقرأ نسبة التباين. تُعرض الأداة النسبة الدقيقة بشكل بارز — على سبيل المثال، 7.23:1 — حتى تعرف بدقة أين تقع.
4. تحقق من توافق WCAG. تُظهر جدول النتائج حالة النجاح أو الفشل لـ:
   • النص العادي وفقًا لمعايير WCAG AA (4.5:1) وAAA (7:1)
   • النص الكبير وفقًا لمعايير WCAG AA (3:1) وAAA (4.5:1)
   • مكونات واجهة المستخدم وفقًا لمعايير WCAG AA (3:1)
5. عرض الألوان في السياق. تُظهر الأداة نماذج من النص العادي والعنوان الكبير مع المزيج المختار، حتى تتمكن من الحكم على قابلية القراءة في الواقع بصريًا.
6. تبديل الألوان باستخدام زر التبديل لاختبار المزيج المعاكس — نص فاتح على خلفية داكنة بدلًا من نص داكن على خلفية فاتحة.
7. نسخ النسبة إلى قصboard بضغط نقر واحد لتوثيقها أو ملاحظات نظام التصميم.

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

فهم نسب التباين

نطاق النسبة	مستوى الوصولية	ما يعنيه
1:1 إلى 2.99:1	يفشل جميع المعايير	النص يكاد لا يمكن تمييزه عن الخلفية؛ غير قابل للاستخدام لأي محتوى قابل للقراءة
3:1 إلى 4.49:1	ينجح AA فقط للنص الكبير ومكونات واجهة المستخدم	مناسب للعناوين الكبيرة (18pt+) والأزرار وأيقونات الحدود؛ يفشل للنص العادي
4.5:1 إلى 6.99:1	ينجح AA للنص العادي	يحقق الحد الأدنى من المعايير للنص العادي؛ قابل للقراءة لمعظم المستخدمين
7:1 إلى 21:1	ينجح AAA للنص العادي	الوصولية المحسنة؛ قابل للقراءة للمستخدمين الذين يعانون من فقدان البصر الكبير؛ مثالي للمحتوى الطويل

ما الذي يُعتبر "نصًا كبيرًا"؟

يُعرّف WCAG النص الكبير بأنه 18 نقطة (24 بكسل) أو أكبر، أو 14 نقطة شديد (حوالي 18.67 بكسل شديد) أو أكبر. العناوين، والأزرار المُحفّزة، والنصوص الرئيسية غالبًا ما تُعتبر نصًا كبيرًا، مما يعني أنها يمكن أن تمر بمعايير أقل من النص العادي. ومع ذلك، فإن الهدف من تحقيق نسبة 4.5:1 في كل مكان هو أفضل ممارسة لأنها تضمن الاتساق وتُحصّن التصميم ضد التكبير والتكبير.

لماذا تستخدم المعادلة التوهج النسبي؟

معادلة تباين WCAG ليست مقارنة بسيطة لقيم RGB. تبدأ بتحويل كل لون إلى التوهج النسبي — وهو قياس لسطوع مدرك يوزع وزنًا أكبر على الأخضر مقارنة بالأحمر أو الأزرق لأن عيون البشر أكثر حساسية للضوء الأخضر. هذا هو السبب في أن لونين لهما نفس قيمة السطوع في RGB يمكن أن تنتج نسب تباين مختلفة. اللون الأحمر النقي (#FF0000) والأخضر النقي (#00FF00) كلاهما لهما كثافة قصوى في قناة واحدة، لكن الأخضر يبدو أفتح للعين البشرية، لذا فإن التوهج النسبي الخاص به أعلى.

الميزات الرئيسية

الميزة	ماذا تفعله	لماذا تهم؟
حساب التباين في الوقت الفعلي	تحسب نسبة WCAG فورًا أثناء تعديل الألوان	انتقل عبر خيارات المزيج وشاهد تحديث التوافق فورًا
اختبار WCAG AA & AAA	تُظهر نجاح أو فشل النص العادي، النص الكبير، ومكونات واجهة المستخدم على مستوى AA وAAA	تعرف بدقة أي المعايير تحققها دون تذكر الحدود
عرض النص في الوقت الفعلي	تُعرض نماذج من النص العادي والعنوان الكبير مع ألوانك	حكم على قابلية القراءة بصريًا، وليس فقط رياضيًا
تبديل الألوان	تُعكس الألوان الأمامية والخلفية بضغط نقر واحد	اختبر النص الفاتح على خلفية داكنة أو العكس فورًا
إدخال HEX	تقبل رموز HEX مباشرة لتطابق الألوان بدقة	تتطابق مع ألوان العلامة التجارية المحددة من نظام التصميم الخاص بك
نسخ النسبة	تنسخ نسبة التباين إلى قصboard	وثّق توافق الوصولية في المواصفات التصميمية والتدقيق
الخصوصية أولاً	تُجري جميع الحسابات في متصفحك	لا تُرسل أي بيانات التصميم إلى أي خادم

على عكس الأدوات الأساسية التي تُظهر فقط عددًا، فإن هذا المُحلّل يضع النسبة في السياق. ترى ليس فقط أن مزيجك يحصل على 4.2:1، بل أن النسبة تفشل AA للنص العادي بينما تمر للنص الكبير — معلومات قابلة للتنفيذ تساعدك على قرار ما إذا كنت ستُضفي لونًا أفتح على النص أو تزيد حجم الخط.

حالات الاستخدام في الواقع

مصممو الويب الذين ينشئون واجهات قابلة للوصول مصمم يبني صفحة وصولية مع خلفية داكنة ونص فاتح. يبدو المزيج أنيقًا على شاشته، لكن مُحلّل التباين يكشف عن نسبة تصل إلى 3.8:1 فقط — فشل AA للنص العادي. يُضفي المصمم لونًا أفتح قليلاً، مما يحقق 4.6:1، الآن الصفحة قابلة للقراءة للمستخدمين الذين يعانون من ضعف البصر دون التضحية بالأسلوب الداكن.

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

المنشئون المحتوى الذين يشكلون الوثائق يقوم مسوق بإنشاء دليل PDF مع صناديق ملونة ونصوص مُبرز. يستخدم مُحلّل التباين لتأكيد أن كل لون نص على كل خلفية يمر بمعايير WCAG AA. هذا يضمن أن PDF قابل للوصول عند تحويله إلى HTML أو قراءته بواسطة قارئات الشاشة، ويحمي المؤسسة من الشكاوى المتعلقة بالوصولية.

المديرون المنتجون الذين يجريون تدقيق الوصولية يقوم مدير منتج بالتحضير لتدقيق VPAT (نموذج الوصولية للمنتج الطوعي). يستخدم مُحلّل التباين لاختبار كل مزيج لون في تطبيقه ضد معايير WCAG، وتوثيق النسب لكل منها. هذا يخلق سجلًا للتدقيق يُظهر المراجعة المطلوبة والتوافق.

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

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

النصائح والممارسات المثلى

• استهدف AAA عندما يكون ممكنًا. بينما AA هو الحد الأدنى القانوني في معظم المناطق، فإن AAA يوفر تجربة أفضل للجميع. إذا كانت ألوان العلامة التجارية قادرة على تحقيق 7:1 دون التعارض، استخدمها. التنازل البصري الصغير يستحق المكاسب الكبيرة في الوصولية.
• لا تعتمد فقط على الألوان. حتى مع التباين المثالي، لا يمكن للجميع الوصول إلى الألوان. قد لا يتم تمييز الأحمر من الأخضر من قبل المستخدمين المصابين بالعمى اللوني. دائمًا ما يجب أن تُقرن الألوان بأيقونات، تسميات، أنماط، أو نصوص لنقل المعنى.
• احصل على اختبار كامل لمزيج الألوان. قد تحتوي أنظمة التصميم على عشرة ألوان نص وعشرة ألوان خلفية. هذا يعطي مائة مزيج ممكن. اختبار كل زوج من الأزواج — أو على الأقل الأزواج الشائعة — يمنع فشل الوصولية من الظهور.
• تحقق من حالات التركيز ومكونات واجهة المستخدم. الأزرار، الروابط، حقول النموذج، والتبديلات تحتاج إلى تباين لا يقل عن 3:1 مع المنطقة المحيطة بها. زر يمر للنص قد يفشل كمكون واجهة المستخدم إذا كان حدوده خافتة جدًا.
• خُذ في الاعتبار الشفافية والغطاء. إذا كان النص يقع على صورة أو غطاء شفاف جزئي، فإن الخلفية الفعالة هي مزيج من الألوان. يختبر مُحلّل التباين الألوان الصلبة، لذا يجب عليك حساب النتيجة المدمجة أولاً أو اختبار بحذر.
• احصل على اختبار عند مستويات التكبير المختلفة. يتكبير المستخدمون الذين يعانون من ضعف البصر إلى 200% أو أكثر. عند التكبير العالي، يظهر النص أكبر، مما يساعد، لكن التباين النسبي يبقى كما هو. تأكد من أن نسبك قوية بما يكفي لتحمل التكبير.
• وثّق نسبك. عندما تنهي زوجًا من الألوان، سجل نسبة التباين في وثائق نظام التصميم الخاص بك. هذا يساعد المصممين والمبرمجين المستقبليين على الحفاظ على الوصولية أثناء تطور المنتج.

الأسئلة الشائعة

هل مُحلّل التباين مجاني للاستخدام؟

نعم. مُحلّل التباين مجاني تمامًا بدون حدود للاستخدام، بدون تسجيل، بدون إعلانات. يمكنك اختبار أي عدد من مزيج الألوان تحتاجه.

ما هو WCAG؟

WCAG هو اختصار لـ Web Content Accessibility Guidelines. إنه معيار دولي معترف به نشرته W3C يحدد كيفية جعل محتوى الويب قابلًا للوصول للأشخاص ذوي الإعاقات. WCAG 2.1 هو الإصدار الحالي، وWCAG 2.2 يضيف معايير إضافية. تُصنّف المبادئ إلى ثلاث مستويات: A (الحد الأدنى)، AA (القياسي)، وAAA (المُحسّن).

ما النسبة التي أحتاجها للنجاح في WCAG AA؟

لـ النص العادي (أقل من 18pt أو 14pt شديد)، تحتاج إلى 4.5:1 على الأقل. لـ النص الكبير (18pt أو أكبر، أو 14pt شديد أو أكبر) و مكونات واجهة المستخدم مثل الأزرار والحقول، تحتاج إلى 3:1 على الأقل.

ما الفرق بين WCAG AA وAAA؟

AA هو مستوى الامتثال القياسي المطلوب من قبل معظم قوانين الوصولية والمبادئ التوجيهية في جميع أنحاء العالم، بما في ذلك قسم 508 في الولايات المتحدة والقانون الأوروبي للوصولية. AAA هو مستوى مُحسّن يوفر الوصولية الأفضل، لكنه ليس مطلوبًا في كل مكان، ويُعتبر أحيانًا صارمًا جدًا للمحتوى العام. بالنسبة لـ AAA، يحتاج النص العادي إلى 7:1 و النص الكبير إلى 4.5:1.

هل يمكنني اختبار الألوان RGB أو HSL؟

تقبل الأداة إدخال الألوان HEX مباشرة. إذا كانت لديك قيم RGB أو HSL، استخدم أولاً أداة مُحدد الألوان الخاصة بنا لتحويلها إلى HEX. أدخل رمز HEX في مُحلّل التباين واختبر فورًا.

هل تعمل هذه الأداة على الأجهزة المحمولة؟

نعم. مُحلّل التباين مُصمم تمامًا ليكون متجاوبًا ويعمل على الهواتف الذكية والأجهزة اللوحية. مُحددات الألوان، النصوص المُعرضة، وجدول النتائج مُحسّنة جميعها لشاشات اللمس والشاشات الصغيرة.

هل يمكنني استخدام هذا الأداة في التصميم المطبوع؟

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

ماذا يحدث إذا فشلت ألوان العلامة التجارية في WCAG؟

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