واجهات التباين وسهولة القراءة

1) لماذا التباين

• يقلل من الحمل المعرفي والتعب،
• يحسن سرعة مسح الواجهة،
• زيادة إمكانية الوصول للأشخاص الذين يعانون من إعاقات بصرية ولون،
• يقلل من الأخطاء في السيناريوهات المترابطة (المدفوعات، الاستمارات، التأكيدات).

2) المفاهيم والصيغ الأساسية

2. 1 التناقض من قبل WCAG

• التباين = (L1 + 0. 05 )/( L2 + 0. 05)، حيث 'L1 ≥ L2'، 'L' هو السطوع النسبي (0.. 1).

2. 2 السطوع النسبي (sRGB)

1. احضر المكونات R, G, B في النطاق 0 1.

• إذا 'c ≤ 0. 04045 '، ثم' c _ lin = c/12. 92`
• خلاف ذلك 'c _ lin = ((c + 0. 055) / 1. 055) ^ 2. 4`

3. السطوع: 'L = 0. 2126 R_lin + 0. 7152 G_lin + 0. 0722 B_lin'

2. 3 تمثيلات الألوان

HSL/HSV - مناسب للتعديل اليدوي، ولكن ليس موحدًا من الناحية الإدراكية.
مختبر/LCH/OKLCH - أقرب إلى الإدراك البشري ؛ OKLCH ملائم للتنوع المنهجي للخفة/التشبع مع الحفاظ على سهولة القراءة.

3) المعايير والأهداف (WCAG 2. 2)

النص ≥ 14 pt جريء أو ≥ 18 pt (عادي): قارن على الأقل 3:1 (AA).
باقي النص: التباين 4 على الأقل. 5:1 (أ أ).
AAA (زيادة إمكانية القراءة): 7:1 للنص العادي ؛ 4. 5-1 لواحد كبير.
الأيقونات والعناصر المهمة غير الفوتوغرافية (حدود حقول الإدخال، وصناديق التحقق، والمفاتيح، ومؤشرات الخطأ): 3:1 معلم ذو خلفية.
يجب أن تكون الدول (تحوم/تركيز/مضغوط/معطل) على الأقل 3:1 قابلة للتمييز بين الدول أو مع خلفية، بالإضافة إلى مؤشرات صريحة غير فوتوغرافية (خط الارتباط، الظلال/الإطارات، تغير السماكة).

4) نظام التصميم: رموز التباين

نوصي بأن يتناقض سجل نظام التصميم كخاصية للرموز.

• 'fg/primary' ↔ 'bg/base' ≥ 7:1 (AAA للنص النقدي)
• 'fg/ثانوي' ↔ 'bg/base' ≥ 4. 5:1
• «fg/smoted» ↔ «bg/suble» ≥ 3:1 (نص الخدمة)
• 'الحدود/الافتراضات' ↔ 'bg/base' ≥ 3:1 (حدود الحقول، البطاقات)
• «غير فعال/افتراضي» ↔ «bg/base» ≥ 4. 5:1 (روابط/أزرار)
• يجب ألا يحاكي «غير فعال/معوق» الحالات النشطة ؛ استخدام خفض التباين والمؤشر/سمات ARIA.

• الخفة الأساسية للموضوع (L)، ثم الانحرافات 'Δ L' للطبقات/الأسطح (' bg/subtle '،' bg/evenated ')،
• إصلاح الحد الأدنى من أزواج التباين في الاختبارات.

5) الموضوعات الخفيفة والمظلمة

موضوع الضوء: النص أسود تقريبًا (ليس خالصًا # 000، ولكنه ظل دافئ/بارد)، والخلفية بيضاء إلى ملونة قليلاً لتقليل «التألق».
الموضوع المظلم: تجنب الخلفية النظيفة # 000 - الجرافيت العميق/الفحم مع L≈0. 12–0. 16 يقلل من الوهج ؛ خفف النص الأبيض إلى L≈0. 9.
الاحتفاظ بنفس الأهداف المتناقضة في كلا الموضوعين ؛ لا تسمح لهجات الألوان بفقدان إمكانية القراءة على خلفية مظلمة (غالبًا ما تكون هناك حاجة إلى تحول 'Δ L' وانخفاض في التشبع).

6) النص في الصور ومقاطع الفيديو

استخدام تراكبات (الطبقة المتدرجة/الشفافة 40-60٪) أو يموت تحت النص.
أصلح 4 على الأقل. 5:1 بين النص والخلفية المحلية للموت.
للفيديو الديناميكي - الخلفية التكيفية/التراكب عن طريق تحليل سطوع الإطار (أخذ عينات من المنطقة المركزية/الخلفية).

7) الدول والتفاعل

يجب تمييز المراجع ليس فقط من خلال اللون: خط تحتية افتراضي أو خط على التحليق/التركيز + التباين ≥ 3:1 مع نص عادي.
الأزرار: نص وأيقونة ≥ 4. 5:1 لملء ؛ 3:1 ≥ ملء البيئة.
الأخطاء/النجاح/التحذيرات: لا تعتمد على اللون ؛ إضافة أيقونات/مطالبات نصية ؛ على الأقل 4 نصوص متباينة. 5:1.

8) الأشخاص الذين يعانون من ضعف الألوان

• Deuteranopia/Protanopia (المنطقة الحمراء الخضراء): تجنب تركيبات «الأحمر مقابل الأخضر» دون علامات إضافية.
• تريتانوبيا: أزواج صفراء زرقاء للتحقق منها بشكل منفصل.
• جعل الأشكال والرسوم البيانية واضحة: الملصقات النصية، وأنواع مختلفة من الضربات/العلامات، وأنماط الملء، والتعليقات التوضيحية القطعية.

9) الطباعة والخلفية

حجم الجسم: 14-16 px الحد الأدنى (الويب)، 16-18 px لمناطق المحتوى.
تباعد الخط 1. 4–1. 6 يحسن إمكانية القراءة على خلفية تباين عالية.
تجنب الأنماط الدقيقة على التباين غير الكافي.
النص على الخلفيات الملونة: تقليل تشبع الخلفية و/أو زيادة الخفة للوصول إلى النسبة المستهدفة.

10) الرسوم البيانية والجداول والرسوم البيانية

الخطوط/الأعمدة ≥ 3:1 إلى الشبكة/الخلفية.
ملصقات المحور والأساطير ≥ 4. 5:1.
استخدم أشكالًا/أنماطًا مميزة تتجاوز اللون.

11) التباين الديناميكي/التكيفي

التباين التلقائي: احسب لون التباين للنص مع الملء المختار (على سبيل المثال عبر OKLCH: المباراة 'L' لتصل إلى 4. 5:1).
إعدادات النظام: الاحترام «يفضل التباين»، «الألوان القسرية»، أوضاع نظام التشغيل عالية التباين.
التخصيص: وضع «تباين عالي» في التطبيق (تقوية «Δ L»، واستبدال لهجات العلامة التجارية بلهجات أكثر حيادية مع الحفاظ على هوية العلامة التجارية من خلال النموذج/الأيقونات).

12) عمليات التحكم والتشغيل الآلي

12. 1 للمصممين

تحقق من التباين في التخطيطات (في كلا الموضوعين وعلى الخلفيات الرئيسية).
أدخل «فتحات التباين» في المكونات (العنوان/الابتدائي/الثانوي/التلميح).
توثيق سياقات خلفية صالحة لكل عنصر.

12. 2 للمطورين

مساعدو الوحدة: وظيفة حساب التباين والتأكيد في اختبارات أزواج الرموز.
لقطات مرئية مع فحص مقاييس التباين (عرض الشاشة + حساب L1/L2 العينة).
بطانات الأسلوب: حظر اللون «الخام»، فقط من خلال الرموز.

12. 3 V CI/CD

يتحقق من جميع أزواج «fg/bg» في الموضوعات والحالات.
تقرير الانتهاك مع العنصر والبديل والموضوع والقيمة الفعلية (على سبيل المثال 3. 9:1 مع 4 المطلوبة. 5:1).

13) تفاصيل iGaming (اختياري)

غالبًا ما تلتهم اللافتات الترويجية الساطعة وبطاقات البطولة النص. مطلوب الحد من تشبع اللوحة/التراكب والخلفية.
عناصر النظام للإشعارات الحرجة (18 +، الحدود، المخاطر) - AAA على النقيض من ذلك.
في لوحات الصدارة/المعاملات: الأرقام والعلامات «+/-» ≥ 4. 5:1، تسليط الضوء على الفوز - ليس فقط بالألوان (أيقونات/علامات).

14) أنتيباترن

اعتمد فقط على اللون لتمييز الحالة.
خطوط رمادية رفيعة على خلفية ملونة دون حساب التباين.
«Dark on Dark» في Dark Mode، «مشرق» في المناطق الترويجية.
نص على الخلفية مع التفاصيل/الضوضاء دون موت.

15) مراجعة القائمة المرجعية

النص الأساسي

• ≥ 4. 5:1 (عادي)، ≥ 3:1 (كبير/دهني).

الروابط/الأزرار

• نص الزر ≥ 4. 5:1 لملء.
• يمكن التمييز بين 3:1 حالات ≥ أو مؤشرات صريحة.

أيقونات/حدود

• ≥ 3:1 إلى الخلفية.

موضوعات مظلمة/ضوئية

• يتم تحقيق نفس أهداف التباين.

الخلفيات الإعلامية

• التراكب/اللوحة، يتم الحفاظ على المعامل.

توافر

• هناك ميزات غير فوتوغرافية إلى جانب اللون.

التشغيل الآلي

• اختبارات التباين في CI/CD على الرموز والمكونات.

16) حقن الرمز (مثال التدوين)

color.bg.base   = oklch(0.95 0.02 260)
color.fg.primary  = oklch(0.18 0.04 260)  # ≈7:1 color.fg.secondary = oklch(0.30 0.03 260)  # ≥4.5:1 color.border    = oklch(0.40 0.03 260)  # ≥3:1 color.accent    = oklch(0.65 0.12 230)  # проверить на обоих фонах

ملاحظة: القيم التقريبية ؛ ويتم اختيار النهايات عن طريق حساب التباين في موضوع معين.

17) وثائق الفريق

في المبادئ التوجيهية، حدد: أهداف التباين، وأمثلة الأزواج الحقيقية/الخاطئة، ومصفوفة «fg × bg» للمكونات الرئيسية، وقواعد خلفيات الوسائط، وكيفية تمكين وضع التباين العالي.
حافظ على صفحة الاستثناءات والأسباب حية (على سبيل المثال، مسموح 3. 8:1 في الحالة الضيقة لرأس العرض الكبير).

موجز

التباين هو معلمة مقاسة، وليس معلمة تذوق. تحديد الأهداف (AA/AAA)، وإدارتها من خلال الرموز (ويفضل في OKLCH)، والتحقق تلقائيًا في CI وبصريًا في التخطيطات، ومراعاة الموضوعات المظلمة/الخفيفة والأشخاص الذين يعانون من إعاقات في الرؤية اللونية. وهذا يضمن إمكانية القراءة ويقلل من الأخطاء ويزيد من التحويل.