مولّد لوحة ألوان متوافقة مع WCAG

أنشئ لوحة ألوان عشوائية وصفِّ منها الألوان التي تبلغ فعلًا نسبة تباين WCAG بمستوى AA أو AAA مع نص أبيض أو أسود. تُحسب الإضاءة والنسبة مباشرةً داخل متصفحك.

6 من الألوان
Aa
نص أبيض: 2.08:1
نص أسود: 10.08:1
✅ AAA
Aa
نص أبيض: 5.21:1
نص أسود: 4.03:1
✅ AA
Aa
نص أبيض: 2.07:1
نص أسود: 10.17:1
✅ AAA
Aa
نص أبيض: 1.7:1
نص أسود: 12.32:1
✅ AAA
Aa
نص أبيض: 11.16:1
نص أسود: 1.88:1
✅ AAA
Aa
نص أبيض: 13.57:1
نص أسود: 1.55:1
✅ AAA

كيف يعمل

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

كيف تُحسب نسبة التباين؟

يتبع الحساب معادلة WCAG الرسمية: يُحوَّل كل لون إلى إضاءة نسبية (مقياس للسطوع المُدرَك يراعي حساسية العين البشرية لكل قناة من الأحمر والأخضر والأزرق)، ثم تُستخرج النسبة بمقارنة إضاءة اللون الأفتح بإضاءة اللون الأغمق. تمثل النسبة 21:1 أقصى تباين ممكن (الأسود الخالص على الأبيض الخالص).

لماذا تعرض بعض الألوان «نص أبيض» وأخرى «نص أسود»؟

تحسب الأداة النسبة في الاتجاهين وتختار تلقائيًا لون النص (الأبيض أو الأسود) الذي يوفّر أفضل تباين على الخلفية المولَّدة: هذا هو الاقتران الذي ينبغي استخدامه إذا اعتمدت هذا اللون خلفيةً في واجهتك.

يُنفَّذ حساب الإضاءة والتباين كاملًا بلغة JavaScript داخل متصفحك: لا يُرسَل أي لون مولَّد إلى خادم.