استوديوهات الألوان وتصميم CSSمعالجة محلية · بدون تسجيل

افحص التباين وابنِ لوحة ألوان متسقة

استوديو الألوان يجمع بين الدقة والسرعة: حوّل أي لون بين المساحات الشائعة، واستخرج الألوان المهيمنة من صورة، واختبر تباين النص على الخلفية وفق WCAG 2.1 وخوارزمية APCA، ثم ولّد سلم درجات متناسقًا لنظام التصميم الخاص بك.

مناسب لـ
مهمة تنفيذية + معرفية: التحقق من قابلية الوصول أو توليد لوحة.
عبارة البحث الرئيسية
فحص تباين الألوان

إجابة مختصرة

حوّل مساحات الألوان، وافحص تباين WCAG وAPCA، وابنِ سلالم ألوان.

مساحة العمل التفاعلية

مساحة العمل أدناه هي الأداة الحقيقية. لا تزال بعض تسميات الضوابط المتخصصة جدًا قيد الترجمة؛ أما المعرفات التقنية والصيغ والأكواد فتبقى دائمًا بصيغتها القياسية.

انتقل للأسفل إلى الدليل العربي الكامل وخطوات الاستخدام والأسئلة الشائعة.

ما هو استوديو الألوان؟

استوديو الألوان يجمع بين الدقة والسرعة: حوّل أي لون بين المساحات الشائعة، واستخرج الألوان المهيمنة من صورة، واختبر تباين النص على الخلفية وفق WCAG 2.1 وخوارزمية APCA، ثم ولّد سلم درجات متناسقًا لنظام التصميم الخاص بك.

يضم هذا الاستوديو 3 مساحات عمل تغطي المهام المتقاربة، ويمكنك التنقل بينها دون مغادرة الصفحة أو إعادة رفع مدخلاتك في كل مرة.

مساحات العمل في هذا الاستوديو

  1. 1

    مساحات الألوان والسلالم ومستخرج الصور

    تحويل بين HEX وRGB وHSL وOKLCH وCMYK وتوليد سلالم درجات واستخراج لوحة من صورة.

  2. 2

    مدقق تباين WCAG 2.1 وAPCA

    حساب نسبة التباين وفق WCAG 2.1 ودرجة APCA مع تحديد مستوى AA وAAA.

  3. 3

    سلم OKLCH والتناغمات وΔE ومصفوفة

    توليد تناغمات لونية وحساب فرق اللون ΔE وبناء مصفوفة تباين N×N.

كيف تستخدم استوديو الألوان

  1. 1

    اختر مساحة العمل المناسبة

    افتح استوديو الألوان واختر من 3 مساحات عمل الوضع الذي يطابق مهمتك: مساحات الألوان والسلالم ومستخرج الصور أو مدقق تباين WCAG 2.1 وAPCA.

  2. 2

    أضف قيمة لون أو صورتان (نص وخلفية) أو صورة

    أدخل قيمة لون أو صورتان (نص وخلفية) أو صورة مباشرة في الصفحة، ثم اختيار التحويل أو التباين أو التوليد. لا حاجة لإنشاء حساب أو رفع الملفات إلى خادم.

  3. 3

    راجع النتيجة وصدّرها

    راجع قيم ألوان أو تقرير تباين أو سلم ألوان في المعاينة، ثم انسخه أو نزّله. إذا لم تكن النتيجة كما توقعت، عدّل الإعدادات وأعد المحاولة.

الإمكانات والمزايا

  • حساب نسبة التباين بدقة مع تحديد الدرجة التي تجتاز المعيار.
  • دعم OKLCH الحديث لتوليد درجات متسقة الإدراك.
  • استخراج لوحة ألوان من صورة مرجعية بلا رفعها.
  • مصفوفة تباين تكشف أزواج الألوان غير الآمنة.

حالات استخدام شائعة

  • التأكد من أن نصًا رماديًا على خلفية بيضاء يجتاز WCAG AA.
  • توليد 11 درجة من لون العلامة التجارية لنظام تصميم.
  • استخراج ألوان صورة منتج لبناء صفحة متناسقة معها.

القيود والتوافق

درجة APCA من خوارزمية ما زالت قيد التطوير ولا تُعد بديلًا عن متطلبات WCAG 2.1 الرسمية. حكم دائمًا على النص الحقيقي وحجمه ووزنه.

تعتمد النتائج على دعم متصفحك لواجهات الويب مثل Canvas وWeb Audio وWeb Crypto وWebAssembly. قد تكون الملفات الكبيرة جدًا بطيئة أو تتجاوز حدود ذاكرة المتصفح. ولا يمكن لأي أداة في هذا الموقع ضمان نسبة ضغط محددة، أو استعادة الملفات التالفة، أو دعم كل تفريعات صيغة ملف معيّنة.

تسميات الضوابط الظاهرة هنا هي واجهة المنتج الأصلية. نُبقي الأسماء التقنية (JSON وPDF وSVG وWebP وJWT…) بصيغتها المعيارية عن قصد.

أسئلة حول استوديو الألوان

ما نسبة التباين المطلوبة في WCAG AA؟

الحد الأدنى 4.5:1 للنص العادي و3:1 للنص الكبير (18pt عادي أو 14pt عريض). أما AAA فيتطلب 7:1 للنص العادي.

هل يكفي اجتياز نسبة التباين لضمان قابلية الوصول؟

لا، هو شرط واحد فقط. راجع أيضًا حجم الخط وتباعد الأسطر وحالة التركيز وعدم الاعتماد على اللون وحده لنقل المعلومة.

هل تُرفع ملفاتي أو نصوصي إلى خادم عند استخدام استوديو الألوان؟

لا. يعمل استوديو الألوان داخل ذاكرة متصفحك؛ تُقرأ المدخلات محليًا وتظهر النتائج في الصفحة نفسها دون إرسالها إلى خادم معالجة.

هل يعمل استوديو الألوان على الهاتف؟

نعم على المتصفحات الحديثة، لكن بعض مساحات العمل تحتاج شاشة أكبر لعرض الجداول أو المعاينات براحة. درجة APCA من خوارزمية ما زالت قيد التطوير ولا تُعد بديلًا عن متطلبات WCAG 2.1 الرسمية. حكم دائمًا على النص الحقيقي وحجمه ووزنه.

أدلة ذات صلة