انتقل إلى الإرشادات
العلامة

إمكانية الوصول

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

واضح بالتصميم.
التالي: شكّل الدرس

قِس التباين

يحتاج النص العادي وفق WCAG AA إلى 4.5:1 على الأقل والنص الكبير إلى 3:1. قارن القيمة غير المقربة؛ النسبة المقربة ليست قرار النجاح. W3C · WCAG 2.2

في التطبيق

واضح بالتصميم.15.54:1

يحقق تباين النص الأساسي

قِس التباين

يحتاج النص العادي وفق WCAG AA إلى 4.5:1 على الأقل والنص الكبير إلى 3:1. قارن القيمة غير المقربة؛ النسبة المقربة ليست قرار النجاح.

التركيز يُظهر المسار

استخدم Tab للتنقل بين الأزرار وEnter أو المسافة لتفعيلها. أبقِ إطار التركيز ظاهرًا.

تصبح الأفكار مفيدة عندما تترابط.

حوّل فكرة واضحة إلى مسار تعلّم. امنح الخطوة التالية مساحة لتصبح مفيدة.

ضع النص التفصيلي على خلفية هادئة. يوضح المثال الكثيف تخطيطًا يجب تجنّبه.

احمِ مساحة القراءة

ضع النص التفصيلي على خلفية هادئة. يوضح المثال الكثيف تخطيطًا يجب تجنّبه.

اجعل الفكرة نفسها قابلة للاستخدام

اجعل الفكرة نفسها قابلة للاستخدام
واضح بالتصميم.15.54:1

يحقق تباين النص الأساسي

تصبح الأفكار مفيدة عندما تترابط.

حوّل فكرة واضحة إلى مسار تعلّم. امنح الخطوة التالية مساحة لتصبح مفيدة.

ضع النص التفصيلي على خلفية هادئة. يوضح المثال الكثيف تخطيطًا يجب تجنّبه.

يغيّر التحكم حجم نص هذا المثال فقط. شغّل الحركة لمقارنتها؛ وتظل الأولوية لإعداد تقليل الحركة في نظامك.

القواعد والمصدر

مقروء افتراضيًا

استخدم نصًا لا يقل عن 16px وتسميات 14px. اختر الكحلي على الأسطح الفاتحة أو الأبيض على الكحلي؛ ولا تعتمد على اللون وحده.

مفيد دون حركة

احفظ وضوح التركيز والتسميات الدلالية وترتيب القراءة المنطقي. يعاد تدفق المحتوى عند تكبير النص 200%. يحتفظ تقليل الحركة بالمعلومات نفسها.

افعل

اربط الحالة بالنص واجعل كل عنصر تحكم قابلًا للوصول بلوحة المفاتيح.

لا تفعل

لا تخفِ الإرشاد المهم داخل تأثيرات التحويم أو النص المقتطع.

افتح مصدر Figma القابل للتحريرصفحات المصدر 31