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

مكتشف أزواج الألوان التي يمكن الوصول إليها

مطورالرياضيات

إعلان · حذف؟

مدخل

عملية تلقائية

انتاج

جانب العميل

إعلان · حذف؟

مرشد

مكتشف أزواج الألوان التي يمكن الوصول إليها

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

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

اختر أو أدخل لون خلفية باستخدام مخطط الألوان أو إدخال hex. يراقب الأداة بشكل فوري الفضاء اللوني ويظهر شبكة من ألوان النص المقترحة التي تتوافق مع مستوى WCAG المختار. انقر على أي عينة ل previewها كحروف على خلفيةك. لتحقق زوج معين، أدخل كلًا من ألوان الخلفية والنص وتعرف عن طريق الفوائد الفورية للنجاح/الfailure لمستويات AA Normal، AA Large، و AAA. تصدير الأزواج المختارة التي اخترتها إلى خصائص CSS الشخصية لاستخدامها مباشرة في ملفات السylesheet الخاصة بك.

خصائص

تحديد مستوى التباين حسب WCAG – حساسية إشعاعية نسبية ودقة نسبة التباين حسب المعايير **WCAG 2.1**
بحث عن شبكة ألوان HSL يبحث بشكل نظامي عن ألوان الشدة، النضارة، واللمعان لتحديد جميع الألوان الخلفية التي تمر.
عرض نص حي – إعرض عينة نص طبيعي و كبير على خلفية مختارة من قبلك مع كل لون مقترح
التزام **آ** و **آآ** --- *(Note: The original text "AA & AAA" was interpreted as a placeholder for compliance standards, translated literally in Arabic as "التزام" with the numerical symbols preserved.)* – تغيير بين عتبة التباين القياسي (AA) (نسبة 4.5:1)، العتبة الكبيرة (AA) (نسبة 3:1)، والعتبة الممتازة (AAA) (نسبة 7:1).
مُحَكَّقُ المَُرَاكِبِ المُعَدَّدَة --- أدخل أي لونين للحصول على نتائج فورية لاختبار نجاح/فشل لجميع مستويات **WCAG**.
أشكال ألوان حسب اللون – اقتراحات منظمة حسب عائلة الألوان للتصفح سهولة
مظهر صيغة الإضاءة – يوضح حساب الإضاءة النسبية وفقًا لمعيار WCAG والقيود المتعلقة بالشفافية
تصدير CSS – استنسخ أزواج الوصول القابلة للتطبيق كخصائص مخصصة لCSS جاهزة للاستخدام في ملفاتك السтили --- (End of output)

إعلان · حذف؟

 التعليمات

ما هي نسبة تباين WCAG ولماذا هي مهمة؟

تحدد **WCAG** (إرشادات الوصول إلى المحتوى الويب) النسبة الأدنى للاختلاف بين ألوان النص والخلفية لضمان readability للمصابين باضطرابات البصر. تتراوح نسبة الاختلاف من 1:1 (لا يوجد اختلاف) إلى 21:1 (أقصى حد، أسود على أبيض). يتطلب مستوى **AA** نسبة 4.5:1 للنص العادي ونسبة 3:1 للنص الكبير. يتطلب مستوى **AAA** نسبة 7:1 للنص العادي. تحقيق هذه المعايير يضمن أن موقعك متاح للحوالي 1 من كل 12 رجل و1 من كل 200 امرأة مصابة باضطراب رؤية الألوان، بالإضافة إلى الأشخاص الذين يعانون من ضعف البصر.
ما الفروقات بين التزام **AA** والتزام **AAA**؟

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

اللمعان النسبي يقيس البريق الظاهري لاللون على مقياس من 0 (أسود) إلى 1 (ابيض). صيغة WCAG أولًا يحول القيم السRGB (من 0 إلى 255) إلى RGB خطي عن طريق تقسيمها بـ 255 ثم تطبيق تصحيح غاما. بالنسبة للقيم أقل من 0.04045، قسّم على 12.92. بالنسبة للقيم الأعلى، أضف 0.055، وقسم على 1.055، ثم ارفع إلى قوة 2.4. اللومينانس النهائي هو 0.2126 × الأحمر + 0.7152 × الأخضر + 0.0722 × الأزرق. هذه الأوزان تعكس كيفية إدراك العين البشرية لللمعان، حيث يساهم الخضري أكثر من أي لون آخر.
هل يمكنني استخدام هذا الأداة لاختيار ألوان العلامة التجارية؟

نعم، أدخل لون خلفية العلامة التجارية الخاصة بك، ثم يظهر الأداة كل ألوان النص التي تلبي معايير الوصول إلى المعلومات (accessibility). هذا مفيد بشكل خاص أثناء تطوير العلامة التجارية أو إعادة تصميمها عندما تحتاج إلى التأكد من أن palette الألوان تعمل بشكل مناسب في تصميم المواقع الويب المتوافقة مع المعايير. يمكنك أيضًا التحقق من أزواج ألوان العلامة التجارية الموجودة لتأكيد أنها تلبي معايير WCAG. ميزة تصدير CSS تسمح بكопиاء الأزواج المتاحة مباشرة إلى ملفات الستيل الخاصة بك، مما يوفر الوقت أثناء تطوير الموقع ويضمن الالتزام بالمعيار منذ البداية.