اختبر هويتك قبل اعتمادها: التباين والخطوط والشعار
يعطيك قالب الهوية أعلاه أربعة ألوان (أساسي، وثانوي، وخلفية، ونص) وخطًا للعناوين، مع IBM Plex Sans Arabic للنصوص. الألوان الجميلة في المربعات قد تتحول إلى نص لا يُقرأ على شاشة هاتف تحت الشمس، لذلك نقترح ثلاثة اختبارات قبل إرسال الملخص للمصمم أو للمطبعة.
الاختبار الأول: نسبة التباين
تضع إرشادات الوصول WCAG في مستوى AA حدًا أدنى لنسبة التباين بين النص وخلفيته: 4.5:1 للنص العادي، و3:1 للنص الكبير (نحو 24 بكسل فأكثر، أو 18.66 بكسل بخط عريض)، و3:1 لحدود الأزرار والأيقونات وحقول الإدخال. تُحسب النسبة من الإضاءة النسبية للونين، ويمكنك قياسها بأي أداة لفحص التباين أو من أدوات المطوّر في المتصفح.
قياس ألوان القالب على خلفية كل اتجاه
| الاتجاه | النص | اللون الأساسي | اللون الثانوي |
|---|---|---|---|
| تقني نظيف | 19.2:1 — ينجح | 6.9:1 — ينجح | 6.1:1 — ينجح |
| دافئ تجاري | 17.0:1 — ينجح | 3.2:1 — للعناوين الكبيرة فقط | 5.5:1 — ينجح |
| هادئ مؤسسي | 15.2:1 — ينجح | 6.7:1 — ينجح | 3.4:1 — للعناوين الكبيرة فقط |
في الاتجاه الدافئ لا يصلح الكهرماني #c47a22 لروابط داخل الفقرات أو لنص صغير على الخلفية الفاتحة، وكذلك النص الأبيض فوقه (3.4:1). استخدمه للمساحات والعناوين الكبيرة، واجعل الروابط والأزرار بالبني #8b5a2b الذي يحقق 5.5:1 على الخلفية و5.8:1 مع نص أبيض. وينطبق الأمر نفسه في الاتجاه الهادئ على الأزرق الرمادي الفاتح #6b8a9e. إن عدّلت أي لون يدويًا فأعد القياس؛ تغيير طفيف في الدرجة قد ينقل النسبة من ناجحة إلى راسبة.
الاختبار الثاني: العربية واللاتينية في سطر واحد
تكتب المواقع العربية كثيرًا أسماء منتجات أو مصطلحات بالإنجليزية داخل الفقرة. إن لم يحتوِ الخط العربي على حروف لاتينية مصممة معه، عرض المتصفح تلك الكلمات بخط احتياطي من النظام، فيبدو السطر مجمّعًا من مصدرين.
الخطوط الثلاثة في القالب تتضمن حروفًا لاتينية، لكن الانسجام يتفاوت: IBM Plex Sans Arabic صُمم ليرافق عائلة IBM Plex اللاتينية، وCairo يمتد لاتينيًا من خط Titillium Web، أما El Messiri فطابعه زخرفي يناسب العناوين أكثر من الفقرات الطويلة.
اختبار عملي: اكتب جملة مثل «ادفع عبر InstaPay أو Vodafone Cash قبل 30 سبتمبر» بحجم 16 بكسل واعرضها على هاتف. راقب ثلاثة أشياء: هل تبدو الحروف اللاتينية أكبر أو أصغر بوضوح من العربية؟ هل تتلامس النقاط بين السطور؟ هل الأرقام مقروءة؟ الحروف العربية تحتاج عادة تباعد أسطر أكبر من اللاتينية، وقيمة line-height بين 1.6 و1.9 نقطة بداية مناسبة.
الاختبار الثالث: الشعار في أسوأ ظروفه
- صغّره إلى 32×32 بكسل كأيقونة متصفح (favicon)، وإلى صورة حساب دائرية. إن ضاعت ملامحه فجهّز نسخة مختصرة من حرف أو رمز لهذه الأحجام.
- اطبعه بلون واحد: أسود على أبيض، ثم أبيض على خلفية داكنة. الشعار المعتمد على تدرج لوني يفشل على الأختام والفواتير.
- حدد مساحة فارغة حوله لا يقترب منها نص أو صورة، وعبّر عنها بمقياس من الشعار نفسه، كارتفاع أحد حروفه.
- حدد أصغر عرض مسموح به في الطباعة وعلى الشاشة.
- اكتب الممنوعات صراحة: لا مط غير متناسب، ولا ظلال، ولا تغيير ألوان، ولا وضع فوق صورة مزدحمة دون طبقة تعتيم.
- سلّم الملفات بصيغة SVG للويب، وPDF للمطبعة، ونسخ PNG بخلفية شفافة للاستخدام السريع.