مدقق تباين الألوان
تحقق من تباين لون النص والخلفية وفق معايير WCAG 2.1 المستويين AA وAAA — مع نسبة التباين فوراً ومعاينة حية وشارات نجاح/إخفاق.
الألوان
4.48:1كلما زادت كان أفضل. يتطلب WCAG ما لا يقل عن 4.5:1 للنص العادي.Aa نص عادي — نص مثال للمعاينة
Aa نص كبير
حول هذه الأداة
يقيس مدقق تباين الألوان هذا مدى وضوح قراءة النص فوق خلفيته باستخدام معادلة التباين في WCAG 2.1. أدخل لون نص ولون خلفية كقيم HEX، أو اخترهما بصرياً، فيعرض فوراً نسبة التباين (مثلاً 4.52:1) مع شارات نجاح أو إخفاق لمستويي AA وAAA من إرشادات الوصول إلى محتوى الويب. تعرض المعاينة الحية نصاً نموذجياً بالألوان التي اخترتها لتحكم على النتيجة بنظرة واحدة، ويبدّل زر التبديل بين المقدمة والخلفية. كل شيء يعمل داخل متصفحك، فهو سريع وخاص ويعمل دون اتصال بعد التحميل — مثالي للمصممين والمطورين وكل من يبني واجهات يمكن الوصول إليها.
طريقة الاستخدام
- 1 أدخل لون النص (المقدمة) كقيمة HEX أو اختره بمنتقي الألوان.
- 2 أدخل لون الخلفية بالطريقة نفسها؛ تُدعم الصيغتان #rgb و#rrggbb.
- 3 اقرأ نسبة التباين وشارات AA/AAA للنص العادي والكبير.
- 4 استخدم زر التبديل واضبط حتى تصل إلى 4.5:1 على الأقل.
كيف تعمل
يُحوَّل كل لون أولاً من sRGB إلى ضوء خطي: يُقسم كل قناة على 255، وتُرفع القيم التي تتجاوز 0.03928 وفق منحنى غاما. ثم تكون اللمعان النسبي L = 0.2126·R + 0.7152·G + 0.0722·B، مع إعطاء الأخضر أكبر وزن لأن العين أكثر حساسية له. نسبة التباين بين لونين هي (L1 + 0.05) / (L2 + 0.05)، حيث L1 هو اللون الأفتح وL2 هو الأغمق. يعطي ذلك قيمة من 1:1 (لونان متطابقان) حتى 21:1 (أسود خالص على أبيض خالص). يتطلب WCAG 2.1 نسبة لا تقل عن 4.5:1 للنص العادي و3:1 للنص الكبير في المستوى AA، وترتفع إلى 7:1 و4.5:1 في المستوى AAA. النص الكبير يعني تقريباً 18.66 بكسل عريضاً أو 24 بكسل عادياً فأكثر.
الأسئلة الشائعة
ما نسبة التباين التي أحتاجها لاجتياز WCAG؟
للمستوى AA من WCAG 2.1 تحتاج إلى 4.5:1 على الأقل للنص العادي و3:1 للنص الكبير. المستوى AAA أكثر صرامة، إذ يتطلب 7:1 للنص العادي و4.5:1 للنص الكبير. تستهدف معظم المواقع المستوى AA كأساس قانوني وعملي.
ما الذي يُعد نصاً كبيراً؟
يعرّف WCAG النص الكبير بأنه 18.66 بكسل على الأقل (نحو 14 نقطة) وعريض، أو 24 بكسل على الأقل (نحو 18 نقطة) بأي سماكة. النص الكبير أسهل في القراءة، لذا يُسمح له بعتبة تباين أدنى (3:1 لـ AA و4.5:1 لـ AAA).
كيف تُحسب نسبة التباين؟
يُحسب اللمعان النسبي لكل لون من قنواته الحمراء والخضراء والزرقاء بعد تحويلها خطياً (L = 0.2126R + 0.7152G + 0.0722B). ثم تكون النسبة (الأفتح + 0.05) / (الأغمق + 0.05)، فتعطي قيماً من 1:1 حتى 21:1 للأسود على الأبيض.
لماذا يعطي الأسود الخالص على الأبيض 21:1؟
للأسود لمعان نسبي قدره 0 وللأبيض 1. وبتعويضهما في (1 + 0.05) / (0 + 0.05) نحصل على 21، وهي أقصى نسبة تباين ممكنة. لذلك يجتاز #000000 على #ffffff كل مستويات WCAG.
هل يؤثر تباين الألوان في تحسين محركات البحث وقوانين إمكانية الوصول؟
نعم. التباين الكافي جزء من معايير إمكانية الوصول التي تشير إليها قوانين مثل ADA والمادة 508 وقانون إمكانية الوصول الأوروبي، وحسن القراءة يحسّن مقاييس سهولة الاستخدام. واستيفاء WCAG AA يقلل المخاطر القانونية ويجعل محتواك صالحاً للأشخاص ذوي ضعف البصر أو اضطرابات رؤية الألوان.
أدوات واستخدامات ذات صلة
مدقق التباين ضروري لتصميم ويب وتطبيقات يمكن الوصول إليها. اقرنه بمحوّل الألوان للتنقل بين HEX وRGB وHSL أثناء ضبط لوحتك اللونية، وبحاسبة النسبة المئوية عند تغيير حجم التباعد أو الشفافية. يستخدمه المصممون ومطورو الواجهات وصنّاع المحتوى لإبقاء الأزرار والتسميات ونص المتن مقروءاً للجميع.