لا تحب الإعلانات؟ يذهب خالية من الإعلانات اليوم 

مولد شبكة تباين الألوان

مطور

إعلان · حذف؟

مدخل

انتاج

جانب العميل

إعلان · حذف؟

مرشد

مولد شبكة تباين الألوان

أدخل ألوان علامتك التجارية أو نظام التصميم الخاص بك وقم بإنشاء مصفوفة تباين WCAG كاملة توضح نسبة التباين لكل تركيبة ممكنة للألوان الأمامية/الخلفية. شاهد على الفور أي أزواج الألوان تمر بمعايير AA و AAA أو تفشل في متطلبات إمكانية الوصول - وهو أمر ضروري لبناء أنظمة تصميم وأدلة أسلوب يمكن الوصول إليها.

كيفية استخدام

أدخل ألوان hex لكل سطر (مع تسميات اختيارية مثل “Primary #3B82F6”)، أو حدد لوحة معدة مسبقًا. انقر إنشاء شبكة لإنشاء مصفوفة التباين. تعرض كل خلية نسبة التباين مع اللون الأمامي الفعلي على الخلفية الفعلية، مع ترميز الألوان حسب مستوى الامتثال WCAG.

خصائص

مصفوفة تباين N×N – تم اختبار كل تركيبة من الألوان الأمامية/الخلفية وعرضها في شبكة مرئية
ترميز ألوان WCAG – أخضر لـ AAA (≥7:1)، أصفر لـ AA (≥4.5:1)، وأحمر للفشل (<4.5:1)
معاينة الألوان الحية – تم عرض كل خلية بنص أمامي فعلي على لون خلفية فعلي
نص كبير AA – يشير أيضًا إلى الامتثال لمعيار النص الكبير AA (≥3:1) للأحجام الأكبر
إحصائيات موجزة – إجمالي الأزواج التي تم اختبارها، ونجاحات AAA، ونجاحات AA، والإخفاقات في لمحة
لوحات معدة مسبقاً – لوحات ألوان تيلوين، تصميم المواد، أو أحادية اللون يتم تحميلها بسرعة
حتى 20 لونًا – يدعم اللوحات من 2 إلى 20 لونًا
العملية فقط من جانب العميل – جميع الحسابات تحدث في متصفحك

إعلان · حذف؟

 التعليمات

ماذا تعني مستويات تباين WCAG؟

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

تُظهر شبكة التباين كل تركيبة ألوان ممكنة في لوحتك مرة واحدة، مما يكشف عن المشكلات التي قد تفوتك عند التحقق من الأزواج واحدًا تلو الآخر. غالبًا ما تحتوي أنظمة التصميم على 8-15 لونًا قد تُستخدم في مجموعات ألوان أمامية/خلفية متنوعة. تختبر شبكة بها 10 ألوان 100 زوج في وقت واحد، وتُظهر على الفور أي التركيبات يمكن الوصول إليها وأيها ليست كذلك. هذا ضروري لإنشاء وثائق وصول شاملة لفرق التصميم.
كيف يتم حساب نسبة التباين؟

تستخدم نسبة تباين WCAG الإضاءة النسبية، المحسوبة من قيم sRGB الخطية. يتم تحويل كل قناة لونية من sRGB المشفر جاما إلى ضوء خطي باستخدام الصيغة: إذا كانت قيمة sRGB 0.03928 أو أقل، اقسم على 12.92؛ وإلا، ارفع (القيمة + 0.055) / 1.055 إلى القوة 2.4. ثم تكون الإضاءة النسبية 0.2126×R + 0.7152×G + 0.0722×B. نسبة التباين هي (الإضاءة الأفتح + 0.05) / (الإضاءة الأغمق + 0.05)، مما ينتج دائمًا قيمة بين 1:1 و 21:1.