البرامج التعليمية
Claude Opus 5.5: إصلاح تباين ألوان العلامة دون إعادة تصميمها
اطلب من Claude Opus 5.5 تعديل أزواج محددة من لون النص والخلفية، ثم تحقق من الألوان بحساب ثابت.
اطلب من Claude Opus 5.5 تعديل أزواج محددة من لون النص والخلفية، ثم تحقق من الألوان بحساب ثابت. يمكن الحفاظ على هوية العلامة مع جعل الأزرار والتعليقات الصغيرة والروابط أوضح. تحديد وظيفة كل لون أنفع من طلب تحويل كل البرتقالي إلى بني.
هذه آلية مراجعة مقترحة تتضمن حسابًا قابلًا للتكرار، وليست اختبار أداء للنموذج. يساعد دليل التوجيه الرسمي على تحديد المطلوب: تثبيت الشعار المعتمد وتغيير متغيرات الواجهة المحددة فقط.
قدّم أزواج الألوان لا لوحة مزاجية فقط
اجمع قيم CSS الفعلية للنص والخلفية المباشرة، مع الشفافية والتدرج وحجم الخط ووزنه والحالة. تحدد لقطة الشاشة موضع المشكلة، لكن ضغط الصورة وتنعيم الحواف قد يؤثران في البكسلات. استخدم قيم الألوان الأصلية للحساب.
يحدد شرح W3C نسبة 4.5:1 للنص العادي و3:1 للنص الذي يستوفي تعريف الحجم الكبير: 18 pt عاديًا أو 14 pt عريضًا على الأقل، مع مراعاة الأحجام المكافئة في أنظمة الكتابة الأخرى. لا تقرّب نتيجة ناقصة لتجعلها ناجحة. استثناء الشعار لا يشمل بقية الواجهة.
| الوظيفة | ما يبقى ثابتًا | ما يمكن تغييره |
|---|---|---|
| الشعار المعتمد | الرسم الأصلي | موضعه أو المساحة حوله |
| نص زر صغير | الكلمات والحجم المقروء | لون النص أو تعبئة الزر |
| رابط داخل النص | المعنى والوجهة | اللون مع تسطير واضح |
| لون زخرفي | الدرجة المميزة للعلامة | لا تغيير إذا لم يحجب المحتوى |
راجع المرور بالمؤشر والتركيز والضغط كلًا على حدة. نجاح زوج نصي واحد لا يعني اكتمال مراجعة إمكانية الوصول؛ لوحة المفاتيح والمؤشرات غير النصية تحتاج فحوصًا مستقلة.
مثال محسوب لزر برتقالي
افترض زرًا بنص أبيض بحجم 16 px على `#FF4E00`. حوّل قنوات sRGB إلى قيم خطية، واحسب الإضاءة النسبية، ثم استخدم `(القيمة الأفتح + 0.05) / (القيمة الأغمق + 0.05)`. النتيجة نحو 3.31:1، دون حد النص العادي. الأسود على الخلفية نفسها يعطي نحو 6.34:1. استخدم القيمة غير المقربة عند الاعتماد.
يمكنك إبقاء التعبئة البرتقالية مع نص داكن، أو إبقاء النص الفاتح وتطوير لون أغمق للأزرار. يظل البرتقالي الزاهي مناسبًا للزخارف. لا تطلب من Claude إعلان نجاح اللون بالنظر؛ اطلب بدائل وخانة للحسابات المتحقق منها.
تصف مناقشة لمصممين حول ألوان العلامة ضعيفة التباين هذا التعارض العملي. هي دليل على وجود حاجة، وليست دليلًا على زيادة التحويلات.
توجيه جاهز للنسخ
راجع تباين النص في CSS ولقطة الشاشة المرفقين.
الشعار المعتمد ثابت. لا تعِد رسمه ولا تستبدل لوحة الألوان كلها.
الزر: خلفية #FF4E00 ونص #FFFFFF بحجم 16 px ووزن عادي.
قدّم خيارين: إبقاء البرتقالي مع نص أغمق، أو إبقاء النص الفاتح مع تعبئة أغمق للأزرار.
أعد قيم المقدمة والخلفية بدقة، وأسماء المتغيرات المتأثرة، وحالات العادي/المؤشر/التركيز، وأصغر تعديل CSS.
إن أمكن تنفيذ كود، احسب باستخدام معادلة إضاءة sRGB في WCAG. وإلا ضع علامة «غير متحقق» على النسب وقدّم مدخلات الحاسبة؛ لا تختلق نتيجة ناجحة.
احفظ الكلمات والوجهات والمسافات والسلوك. أضف تسطيرًا للروابط كي لا يميزها اللون وحده.
افصل الفحوص المتبقية، ولا تصف الصفحة كلها بأنها ميسّرة لأن زوجًا واحدًا نجح.تحقق في التصميم النهائي
طبّق خيارًا على نسخة من المكوّن، وقارنه بالحجم الفعلي وأعد حساب الأزواج المعدلة. استخدم الخلفية الحقيقية، لا لوحة بيضاء. النص شبه الشفاف يحتاج اللون الناتج بعد التركيب، والنص فوق التدرج يحتاج فحص نطاق الخلفيات المقابل له.
اختبر عرضًا ضيقًا وتكبير الخط. تأكد أن مؤشر التركيز واضح وأن حالة الضغط لا تعيد الزوج الضعيف. أرفق قائمة المتغيرات المعتمدة بالتصدير لتستخدم الصفحات والإعلانات اللاحقة ألوان الأزرار نفسها.
أين يدخل Panelly؟
بعد التحقق من الألوان، استكشف في Panelly Studio إعلانًا كاملًا يجمع المنتج والخلفية والعنوان وزر الدعوة. اطلب مساحة ذات لون موحد خلف النص فوق الصور المزدحمة، وراجع التصدير بحجم التسليم. لا نقدّم Panelly هنا بوصفه تكاملًا مع Opus أو أداة اعتماد لإمكانية الوصول.
راجع انحراف أسلوب العلامة للاتساق، وتعديل صفحات الهبوط لتغيير البنية.
أسئلة شائعة
هل يكفي جعل النص عريضًا؟
النص الصغير العريض لا يصبح تلقائيًا نصًا كبيرًا. طبّق تعريف الحجم وافحص الزوج الفعلي.
هل يجب أن تنجح كل ألوان العلامة فوق الأبيض؟
لا. قيّم الأزواج التي تنقل معلومات في التصميم المسلم. يمكن أن يختلف دور اللون الزخرفي عن لون الأزرار المقروء.
