فاحص التباين — تباين ألوان WCAG
افحص نسبة تباين لوني النص والخلفية وفق WCAG AA/AAA وشاهد النتيجة فوراً.
الثعلب البنّي السريع يقفز فوق الكلب الكسول.
الثعلب البنّي السريع يقفز فوق الكلب الكسول.
يُحسب محلياً
آمن للهويات غير المعلنة
بلا حساب
اتصال آمن
كيف تعمل
- 1
حدّد لون النص
الصق رمز HEX للمقدّمة، أو اخترها من العيّنة اللونية.
- 2
حدّد لون الخلفية
افعل الشيء نفسه لما يقع خلف النص — الخلفية الفعلية، لا الأبيض افتراضاً.
- 3
اقرأ النتيجة
تظهر النسبة والنجاح أو الرسوب لكل مستوى معاً، مع نصّ عيّنة حيّ.
لماذا تستخدم هذه الأداة
رقم لا رأي
التباين نسبة قابلة للقياس بين 1:1 و21:1. الأداة تحسبها، فتتوقّف عبارة «تبدو جيدة لي» عن أن تكون الحجّة الفاصلة.
كل العتبات دفعة واحدة
المستويان AA وAAA، للنص العادي والكبير، مقيَّمة معاً — فترى فوراً في أي استعمال يكون الزوج آمناً.
معاينة حيّة
نصّ حقيقي معروض بالزوج الذي تختبره، فيُفحص الرقم والمظهر جنباً إلى جنب.
أصلحه داخل الأداة
عدّل أحد اللونين فتتحدّث النسبة أثناء التعديل، فتجد أقرب درجة ناجحة بدل التخمين.
لا شيء يُرفع
الحساب عملية حسابية في متصفحك — ولا تُرسل أي قيمة لونية إلى أي مكان.
مجاني بلا حساب
بلا تسجيل، وبلا حدّ، وبلا علامة مائية على شيء.
ما الذي تقيسه نسبة التباين فعلاً
النسبة تقارن الإضاءة النسبية للونين — أي كم من الضوء يعكسه أو يصدره كلٌّ منهما، مرجَّحاً بحسّاسية البصر البشري للأحمر والأخضر والأزرق. وتمتدّ من 1:1 حيث يتطابق اللونان ويصير النص غير مرئي، إلى 21:1 وهو الأسود الخالص على الأبيض الخالص. والمهم أنها تقيس فرق الإضاءة لا فرق الصبغة: فأحمر مشبَع وأخضر مشبَع بإضاءة متقاربة يقعان قرب 1:1 ويكادان لا يُقرآن معاً، رغم أنهما يبدوان مختلفين إلى أقصى حدّ لمن يملك رؤية لونية اعتيادية. ولهذا فقول «هذان اللونان متباينان بقوة» حكمٌ غير موثوق، ولهذا وُجدت المعادلة.
العتبات، وأيّها ينطبق عليك
يحدّد WCAG مستويَي مطابقة. المستوى AA، وهو ما تستهدفه معظم المؤسسات ومعظم الاشتراطات القانونية، يطلب 4.5:1 لنصّ المتن العادي و3:1 للنص الكبير — والكبير يعني 18 نقطة، أو 14 نقطة إن كان عريضاً. أما AAA فيرفعهما إلى 7:1 و4.5:1، وهو واقعي لنصّ متن في موقع توثيق لكنه غير واقعي عادةً لصفحة تسويقية تقودها الهوية. وأمران يوقعان الناس. الأول أن سماحية النص الكبير سخية بما يكفي ليَنجح عنوان بينما تسقط الفقرة تحته باللون نفسه. والثاني أن مكوّنات الواجهة والرسومات ذات المعنى — حدّ حقل إدخال، أو أيقونة تحمل معلومة — لها اشتراط 3:1 خاص بها، وفحص النص وحده يفوّته كلياً.
لماذا تسقط ألوان الهوية في هذا الاختبار كثيراً
لوحات الهوية تُختار لطابعها على المساحات الكبيرة لا لمقروئيتها بحجم 16 بكسل. والألوان متوسّطة الدرجة هي الضحية المعتادة: برتقالي هوية أو فيروزي أو ليموني يبدو واثقاً كتعبئة زرّ، يقع غالباً بين 2:1 و3:1 على الأبيض، وهو ما لا ينجح في شيء. والغريزة أن تجادل الرقم، والرقم لا يتحرّك. أما الاستجابة المنتجة فأن تُبقي لون الهوية حيث ينجح — التعبئات والحدود والخطوط العرضية الكبيرة — وتشتقّ نسخة أغمق لنصّ المتن بخفض الإضاءة في HSL حتى تتجاوز النسبة العتبة، وهو ما يجعله محوّل الألوان عملاً من خطوتين. فتبقى هوية الصبغة سليمة ويصير النص مقروءاً.
النص الرمادي أشيع حالات الرسوب على الويب
صار النص الرمادي الفاتح على الأبيض عُرفاً تصميمياً لأنه يبدو هادئاً وأنيقاً على شاشة جيدة في غرفة مضيئة. لكن بالقياس، `#999999` على الأبيض نحو 2.8:1 ويسقط في AA صراحةً؛ و`#767676` نحو 4.5:1 وهو أفتح رمادي ينجح لنصّ عادي. والفارق بين هذين الرمزين غير مرئي في مراجعة تصميم، وحاسم لقارئ على هاتف في ضوء النهار أو ببصر ضعيف قليلاً. وإن كان النموذج يستعمل الرمادي لبناء التراتب، فالعلاج عادةً في الحجم والوزن لا في الإضاءة — فرمادي داكن أصغر وأخفّ وزناً يُقرأ ثانوياً دون النزول تحت العتبة.
ما لا تخبرك به النسبة
تجاوز 4.5:1 أرضية لا ضمانة لطباعة جيدة. المعادلة تتجاهل حجم الخط خارج حدّ النص الكبير، وتتجاهل وزن الحرف — فخطّ رفيع عند 4.6:1 أصعب قراءةً من وزن متوسط بالنسبة نفسها — وتتجاهل اقتران اللونين ذاته. فالنص الأحمر على الأخضر ينجح بارتياح إن اختلفت الإضاءة كفاية، ويظلّ خياراً رديئاً لنحو رجل من كل اثني عشر ممن لديهم عمى ألوان أحمر-أخضر، لأنهم يفقدون تمييز الصبغة الذي يتّكل عليه بقية التصميم. فالتباين ضروري وغير كافٍ: تجاوزه أولاً، ثم احكم على الطباعة.
فحص النص فوق الصور والتدرّجات
المعادلة تأخذ لونين صلبين، والنص الموضوع فوق صورة أو تدرّج ليست له خلفية واحدة — بل خلفية مختلفة خلف كل حرف. والمقاربة العملية أن تختبر مقابل أفتح نقطة وأغمق نقطة يعبرهما النص فعلاً؛ فإن سقطت إحداهما فالتخطيط هو ما يحتاج معالجة لا لون النص. والحلول المعتادة طبقة شبه شفافة بين الصورة والنص، أو لوح صلب خلف كتلة النص، أو ظلّ للنص — وكلها تُنشئ عملياً خلفية يمكن التحكّم بها ثم قياسها. أما الاختبار مقابل متوسّط سطوع الصورة وحده فهو ما يُنتج عناوين تختفي فوق رقعة سماء ساطعة.
أخطاء شائعة يجب تجنّبها
- الحكم على التباين بالعين على شاشة جيدة في غرفة مضيئة. هذا أكثر الظروف تسامحاً مما سيواجهه تصميمك؛ والقارئ على هاتف تحت الشمس أو ببصر ضعيف هو الحالة التي وُجدت العتبة لأجلها.
- فحص العنوان وافتراض سلامة نصّ المتن. النص الكبير يتجاوز 3:1 بينما يحتاج العادي 4.5:1 — فاللون نفسه قد ينجح لأحدهما ويسقط للآخر في الصفحة ذاتها.
- فحص ألوان النصوص وحدها. حدود حقول الإدخال وحلقات التركيز والأيقونات الحاملة لمعنى لها اشتراط 3:1 خاص بها، وتدقيق النص وحده يفوّتها جميعاً.
- قياس نص فوق صورة مقابل متوسّط سطوعها. اختبر مقابل أفتح وأغمق نقطة يعبرهما النص فعلاً، أو أضف طبقة تعتيم لتصير هناك خلفية واحدة قابلة للقياس.
- اعتبار النجاح نهاية المسألة. عتبة 4.5:1 أرضية — فخطّ رفيع أو تباعد أسطر ضيّق أو اقتران أحمر-أخضر قد يبقى صعب القراءة بنسبة مطابقة تقنياً.
كيف تُقارن
| KeroTools | أدوات مطوّري المتصفح | إضافات التصميم | |
|---|---|---|---|
| AA وAAA معاً | نعم | AA وحده عادةً | يتفاوت |
| النص العادي والكبير | كلاهما معروض | أحياناً | عادةً |
| يعمل قبل البناء | نعم | لا — يحتاج صفحة معروضة | نعم |
| إرسال القيم إلى خادم | أبداً | لا | بحسب الإضافة |
| حساب أو ترخيص | لا هذا ولا ذاك | لا هذا ولا ذاك | مطلوب غالباً |
| التكلفة | مجاني | مجاني | مجاني / مدفوع |
المزايا
حساب نسبة WCAG
معادلة الإضاءة النسبية الرسمية، لا تقدير بالعين.
المستويان AA وAAA
كلا مستويَي المطابقة مقيَّم، فتعرف كم هامش الأمان لدى الزوج.
النص العادي والكبير
للنص الكبير عتبة أدنى؛ ويُعرض الاثنان بدل أن يُترك لك تذكّر أيّهما ينطبق.
نصّ عيّنة حيّ
محارف حقيقية بالزوج المختبَر، وهي تكشف مشكلات لا يكشفها رقم مجرّد.
تعديل وإعادة فحص فورية
حرّك أحد اللونين وراقب النسبة تتحرّك، لتجد أصغر تغيير ينجح.
إدخال HEX
الصق الرموز مباشرةً من وثيقة هوية أو ملف تنسيق.
بلا تثبيت
لا شيء يُنزَّل أو يُثبَّت — يعمل على صفحة الويب مباشرة.
يدعم العربية والاتجاه من اليمين
واجهة كاملة بثماني لغات، منها العربية بالاتجاه الصحيح.
آمن افتراضياً
عبر HTTPS، بلا تتبّع للملفات وبلا رفع لأي طرف ثالث.
من يستخدمها
مطوّرو الواجهات
حسم مسألة لونية بنسبة مقيسة بدل جدال في مراجعة تصميم.
المصمّمون
إيجاد أقرب درجة ناجحة من لون الهوية قبل أن يصل إلى مكتبة مكوّنات.
فرق الإتاحة والامتثال
توثيق أي الأزواج يحقّق AA وأيّها يحتاج معالجة، بالنسب الدقيقة.
القطاع العام والتعليم
تلبية اشتراطات إتاحة هي التزام قانوني لا تفضيل.
الأسئلة الشائعة
يتطلّب WCAG AA نسبة 4.5:1 على الأقل للنص العادي و3:1 للنص الكبير؛ ويتطلّب AAA نسبة 7:1 و4.5:1 على التوالي.
لا. كل شيء يعمل محلياً في متصفحك — لا شيء يُرفع أو يُخزَّن أو يُشارَك.
نعم — مجاني تماماً، بلا حساب وبلا حدود.