الخريطة الباب ٢: التنظيم
التباينContrast
ما لا يتميز عن خلفيته لا يُرى.
التباين هو الفرق بين العنصر وما حوله: بين النص وخلفيته، بين الزر والمساحة التي يجلس فيها. هو ما يجعل الشيء مقروءاً أولاً، ثم ما يوجه الانتباه إلى المهم. والأهم أنه مسألة وصول: ملايين المستخدمين يعانون ضعفاً في النظر أو يستخدمون هواتفهم تحت الشمس.
الجميل الذي لا يُقرأ ليس جميلاً
الألوان الباستيل الهادئة تبدو أنيقة في ملف التصميم، لكن حين يكون النص الوردي على خلفية وردية فاتحة، يصبح التمييز بين «متوقف» و«مكتمل» مهمة شاقة. المعيار المعتمد (WCAG) يطلب نسبة تباين لا تقل عن 4.5:1 للنص العادي.
لا تحتاج أن تتخلى عن ألوانك: احتفظ بالخلفية الفاتحة، واجعل النص درجة أغمق بكثير من نفس اللون.
خمس أدوات للتباين
اللون ليس أداتك الوحيدة. الوزن: عريض مقابل عادي. الحجم: كبير مقابل صغير. الإطار: حين يتشابه لون العنصر مع خلفيته، يفصله إطار رفيع. الظل: يرفع العنصر عن سطحه. اجمع بينها بحساب، فزر ثانوي بلا لون ولا إطار يختفي تماماً.
ستُطبَّق الإعدادات الجديدة على كل أجهزتك.
ستُطبَّق الإعدادات الجديدة على كل أجهزتك.
النص رمادي فاتح أكثر من اللازم. اسحب المؤشر حتى يصبح مقروءاً وفق معيار WCAG — نسبة 4.5:1 على الأقل.
الشعاب المرجانية ليست صخوراً ولا نباتات، بل مستعمرات من كائنات دقيقة تعيش متلاصقة وتبني معاً واحدة من أغنى البيئات على الأرض.
نسبة التباين مع الأبيض1.69:1
الخصائص
النص فوق الصور
نص أبيض فوق صورة داكنة يبدو رائعاً — حتى تُستبدل الصورة بأخرى فاتحة. المكوّن الجيد يعمل مع أي صورة. الحل: طبقة متدرجة داكنة خلف النص، أو ضبابية خلفه، أو وضع النص في شريط بخلفية ثابتة.
سيستخدم فريق المحتوى هذه البطاقة مع مئات الصور المختلفة. أي تصميم أضمن؟
في هذا النموذج معلومة مهمة لن يراها كثير من المستخدمين. انقر عليها.
وضع التفتيش: مرّر على عناصر التصميم وانقر على موضع الخطأ — أو تنقّل بـ Tab واضغط Enter.
اختبر نفسك
١. ما أقل نسبة تباين يطلبها معيار WCAG (مستوى AA) للنص العادي؟
٢. زر ثانوي بلا خلفية ولا إطار على خلفية رمادية فاتحة. ما الحل الأبسط؟
٣. كيف تضمن قراءة نص أبيض فوق صور متغيرة؟