افحص نسبة التباين بين لونين مقابل معايير إتاحة الوصول WCAG AA وAAA، مع معاينة نصية حية — فورًا، داخل متصفحك مباشرة.
📂 التقنية والإنترنتأدخل لون النص ولون الخلفية كرمزَي HEX (مثل #1F2937)، ثم اضغط افحص التباين لرؤية النسبة، وما إذا كانت تجتاز معايير WCAG AA/AAA، ومعاينة حية لنص عينة على تلك الخلفية. كل شيء يعمل محليًا في متصفحك — لا حاجة للتسجيل، ولا تُرسَل أي بيانات لأي مكان أبدًا.
تقيس هذه الأداة مدى سهولة قراءة نص بلون معين على خلفية بلون آخر، باستخدام معادلة نسبة التباين الرسمية من إرشادات إتاحة الوصول لمحتوى الويب (WCAG). أدخل لون النص ولون الخلفية كرمزَي HEX، وتحوّل الحاسبة كل منهما إلى السطوع النسبي (مقياس للسطوع المُدرَك يراعي اختلاف حساسية العين البشرية لألوان الأحمر والأخضر والأزرق)، وتحسب نسبة تتراوح من 1:1 (بلا تباين إطلاقًا، كأبيض على أبيض) إلى 21:1 (أقصى تباين، أسود خالص على أبيض خالص). تُقارَن هذه النسبة بعد ذلك بأربعة حدود قياسية لمعايير WCAG: 4.5:1 لنص عادي بمستوى AA، و3:1 لنص كبير بمستوى AA، و7:1 لنص عادي بمستوى AAA، و4.5:1 لنص كبير بمستوى AAA. بلوغ هذه الحدود مهم بما يتجاوز قوائم التحقق الرسمية بكثير — فالنص منخفض التباين صعب القراءة فعليًا لضعاف البصر أو مستخدمي عمى الألوان، ومزعج غالبًا للجميع أيضًا، خصوصًا على شاشة ساطعة في الخارج أو شاشة منخفضة الجودة.
قبل أن تُقدِّم إرشادات إتاحة الوصول لمحتوى الويب معادلة نسبة تباين موحَّدة، كان الحكم على ما إذا كان النص "مقروءًا بما يكفي" مقابل خلفيته أمرًا شبه ذاتي تمامًا — فرمادي مريح على أبيض بالنسبة لمصمم واحد قد يكون فعليًا صعب القراءة لشخص آخر، خصوصًا لضعاف البصر، أو أصحاب أنواع معينة من عمى الألوان، أو ببساطة أعين أكبر سنًا فقدت بعض حساسية التباين مع التقدم في العمر. استبدل المعيار الرقمي هذا التخمين بشيء موضوعي وقابل للاختبار، تمامًا كما يستبدل كود البناء عبارة "متين بما يكفي" برقم تحمّل محدد.
تبدأ المعادلة نفسها بتحويل كل لون من مقياس RGB المألوف (0 إلى 255) إلى ما يُعرف بالسطوع النسبي — رقم واحد يمثل مدى سطوع ذلك اللون كما تراه العين البشرية، مع مراعاة أن الرؤية البشرية أكثر حساسية بكثير للضوء الأخضر منها للأحمر أو الأزرق. لهذا السبب تُرجِّح معادلة السطوع في WCAG اللون الأخضر بأعلى وزن (معامل 0.7152)، والأحمر بوزن أقل بكثير (0.2126)، والأزرق بأقل وزن (0.0722) — إذ يبدو مربع أخضر خالص أكثر سطوعًا للعين البشرية من مربع أزرق خالص بنفس الشدة الرقمية تمامًا، وتعكس المعادلة هذه الحقيقة البيولوجية بدلًا من معاملة قنوات الألوان الثلاث كأنها متساوية في الإدراك.
بمجرد حصول كلا اللونين على قيمة سطوع نسبي، تكون نسبة التباين ببساطة هي السطوع الأعلى مضافًا إليه ثابت صغير، مقسومًا على السطوع الأدنى مضافًا إليه الثابت نفسه: (L1 + 0.05) / (L2 + 0.05). يمنع الثابت المُضاف 0.05 عدم استقرار النسبة رياضيًا عندما تكون قيمة السطوع عند الصفر أو قريبة منه (الأسود الخالص)، وهو أيضًا تقريب تقريبي لكمية صغيرة من الضوء المحيط الذي ينعكس عن أي شاشة حقيقية حتى عند عرض لون أسود "خالص". والنتيجة رقم واحد سهل المقارنة: 1:1 بالضبط للونين متطابقين، و21:1 بالضبط للحد الأقصى النظري من الأسود الخالص مقابل الأبيض الخالص.
حدود WCAG الأربعة — 4.5:1 و3:1 لمستوى AA، و7:1 و4.5:1 لمستوى AAA — ليست اعتباطية أيضًا؛ فقد اشتُقت من أبحاث علوم الرؤية حول مستويات التباين التي يبقى عندها النص مقروءًا بشكل موثوق لأصحاب حدة البصر المنخفضة نسبيًا، بما يقارب رؤية 20/40. يعكس الحد الأدنى الأقل للنص الكبير حقيقة بسيطة عن الرؤية البشرية: الأشكال الأكبر ذات الحروف الأكثر سماكة تبقى واضحة التمييز عند مستويات تباين قد تجعل النص الصغير الرفيع يمتزج بخلفيته. المصممون الذين يختبرون ويضبطون فعليًا وفق هذه الحدود الرقمية — بدلًا من الاعتماد على شكل توليفة الألوان على شاشتهم الجيدة المضاءة جيدًا — يميلون لإنتاج واجهات تبقى مقروءة عبر نطاق أوسع بكثير من ظروف المشاهدة الواقعية والقدرات البصرية المختلفة.
هي رقم يتراوح من 1:1 (لونان متطابقان، بلا تباين) إلى 21:1 (أسود خالص على أبيض خالص، أقصى تباين) يقيس مدى سهولة تمييز لون عن آخر، ويُحسَب من السطوع النسبي لكل لون باستخدام معادلة WCAG.
لمستوى AA (الأكثر طلبًا عمومًا): 4.5:1 على الأقل للنص العادي، أو 3:1 للنص الكبير (نحو 18.66 بكسل عريض أو 24 بكسل عادي فأكبر). لمستوى AAA الأكثر صرامة: 7:1 على الأقل للنص العادي، أو 4.5:1 للنص الكبير.
النص الكبير أسهل قراءةً بطبيعته عند تباين أقل، لأن حروفه أكثر سماكة وأشكاله أوضح تمييزًا، لذا تسمح معايير WCAG بنسبة دنيا أقل للنص الكبير مقارنةً بنص المحتوى العادي.
لا. تحسب هذه الأداة نسبة التباين القياسية لمعايير WCAG المعتمدة على السطوع، وهي مصممة حول سهولة القراءة العامة وإتاحة الوصول لضعاف البصر، وليس محاكاة نوع معين من عمى الألوان. اجتياز تباين WCAG مفيد أيضًا لمستخدمي عمى الألوان، لكنه ليس بديلًا عن محاكاة مخصصة لعمى الألوان.
لا. تُحسَب نسبة التباين بالكامل داخل متصفحك باستخدام جافاسكريبت، ولا يُرسَل أو يُسجَّل أو يُحفَظ أي شيء تُدخله في أي مكان.