هل تصلح ألوان هويتك لموقع عربي وإنجليزي واضح القراءة؟

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

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

يتطلب معيار الحد الأدنى لتباين النص في WCAG 2.2 عمومًا نسبة 4.5:1 للنص العادي و3:1 للنص الكبير المؤهل. ويُقصد بالكبير عادة 18 نقطة على الأقل، أو 14 نقطة بخط عريض، أو ما يعادلها في أنظمة الكتابة الأخرى. يستثني المعيار نص الشعار، لكن لا يستثني عناوين الصفحة وتسميات الأزرار لمجرد أنها بألوان الهوية. ولا يجوز تقريب نتيجة دون الحد إلى الأعلى لاعتبارها ناجحة.

ويتطلب معيار التباين غير النصي عمومًا نسبة 3:1 مقابل الألوان المجاورة للمعلومات البصرية اللازمة لتمييز عناصر التحكم وحالاتها، مع استثناءاته المحددة. لذلك راجع تسمية العنصر وإشاراته البصرية الضرورية بصورة منفصلة. نجاح هذين الفحصين لا يثبت مطابقة الموقع الكاملة لـWCAG.

المراجع: W3C WCAG 2.2: understanding contrast minimum — بالإنجليزية · W3C WCAG 2.2: understanding non-text contrast — بالإنجليزية

مثال توضيحي فقط: تعتمد منشأة سعودية افتراضية للأعمال الداخلية الكريمي #FFF8EE والفحمي #272727 والبرونزي #A57B4F والعنابي #5B2534. يستخدم الجدول حساب التباين من الإضاءة النسبية لألوان sRGB مصمتة ومعتمة تمامًا. نعرض النتائج بمنزلتين عشريتين لتسهيل القراءة، لكن القرار يعتمد القيمة غير المدوّرة. هذه لوحة افتراضية، وليست اقتراحًا لتغيير هوية بياواي.

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

مرّر الجدول أفقيًا لقراءة جميع الأعمدة.

أنشئ نموذجًا لكل عنصر مهم بالخط والحجم وقيم الألوان المستخدمة في التنفيذ. افحص الزر قبل التفاعل وعند مرور المؤشر وعند تركيز لوحة المفاتيح وبعد الاختيار إن كان ذلك مناسبًا. قوة الحالة الأساسية لا تثبت أن معالجة فاتحة عند المرور ستبقى مقروءة. سجل لون النص وخلفيته الفعليين في كل حالة بدل اعتماد صورة للوحة الألوان وحدها.

تحتاج الصور والتدرجات والشفافية وخلفيات الفيديو إلى فحص إضافي. ضع النص الأساسي على سطح مصمت متوقع، أو اختبر طبقة التغطية كاملة فوق خلفيتها الفعلية. فقيمة لون الهوية الاسمية تتجاهل الشفافية والتأثيرات الأخرى التي تغيّر النتيجة الظاهرة.

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

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

راجع التخطيط على الهاتف وسطح المكتب، ثم افحص التكبير ومساحة النص المتاحة. اطلب من مراجع العثور على السعر وتحديد الخيار النشط وتصحيح خطأ دون إرشاد مسبق. سجل العنصر الذي سبب التردد. ينتج عن ذلك طلب تعديل أوضح من «اجعل كل شيء أغمق»، وهي عبارة قد تلغي التدرج البصري وتترك المشكلة الفعلية دون تحديد.

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

1. حصر الأدوار: سمِّ استخدامات النص والإجراء والحدود والتركيز والحالة بدل اعتماد الألوان منفردة.
2. تسجيل الزوج الفعلي: حدد اللون الأمامي والخلفية والشفافية ومعالجة الخط المقصودة لكل حالة.
3. الحساب والفحص: قارن بالمعيار المناسب واحتفظ بالنتيجة غير المدوّرة، ثم راجع العنصر بعد عرضه.
4. اعتماد اللغتين: افحص العربية والإنجليزية والنص المختلط والشاشة الصغيرة والرسالة الأطول.
5. تسليم الحدود بوضوح: سجل الاستخدامات المقبولة والمرفوضة وفحوص الإتاحة المتبقية ومسؤول مراجعة التغييرات.

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

أما في الرياض وجدة، افحص ملاحظات الخدمة أو التوصيل الأطول التي يحتاجها نشاطك فعلًا، دون ابتكار ألوان خاصة بكل مدينة لا يفهم دلالتها إلا المصمم. يستطيع نظام عناصر واضح ومتسق التعامل مع سياقات عملاء مختلفة. تستطيع بياواي مراجعة الهوية وعناصر الموقع عن بُعد لهذه المناطق؛ ولا يتضمن المثال ادعاء فروع محلية أو عملاء مشاريع أو تحسن مضمون في الاستفسارات.

اسأل المزود عن القوالب والعناصر والحالات واللغات المشمولة. قد تنتج مراجعة مختصرة لانتقال الهوية إلى الموقع جدول أدوار وعينات عناصر معدلة وملاحظات تنفيذ. أما تقييم الإتاحة الأوسع فيشمل معايير أخرى ومهام اختبار مختلفة. اذكر الحد في العرض حتى لا يُفهم تحسين اللوحة على أنه شهادة إتاحة شاملة.

أعد فحص الصفحات المنشورة واحتفظ بورقة الأدوار المعتمدة. راجع الصور وطبقات التغطية والأزرار الجديدة مقابلها. توضح الأزواج المختبرة المسؤولية عن الاستثناءات، لكن التباين وحده لا يضمن راحة القراءة للجميع أو الامتثال القانوني أو ارتفاع ترتيب البحث أو زيادة المبيعات.

أُعدّ هذا الدليل بمساعدة الذكاء الاصطناعي، مع فحص المعلومات المتعلقة بالمنصات مقابل المراجع الأصلية أدناه وقت النشر. أطر القرار وقوائم الفحص توصيات تحريرية من بياواي؛ الأمثلة الموصوفة بأنها توضيحية ليست قصص عملاء أو نتائج فعلية. قد تتغير واجهات المنصات وشروطها.

• W3C WCAG 2.2: understanding contrast minimum — بالإنجليزية
• W3C WCAG 2.2: understanding non-text contrast — بالإنجليزية