رابط های کنتراست و قابلیت خواندن

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 ', then' 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 - مناسب برای تنظیم دستی، اما یکنواخت perceptually.
آزمایشگاه/LCH/OKLCH - نزدیک به ادراک انسان ؛ OKLCH برای تغییرات سیستماتیک روشنایی/اشباع در حالی که حفظ خوانایی مناسب است.

3) هنجارها و اهداف (WCAG 2. 2)

متن ≥ 14 pt پررنگ یا ≥ 18 pt (عادی): کنتراست حداقل 3:1 (AA).

بقیه متن: کنتراست حداقل 4. 5:1 (AA)

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/muted' ↔ 'bg/subtle' ≥ 3:1 (متن سرویس)
• 'border/default' ↔ 'bg/base' ≥ 3:1 (مرزهای فیلدها، کارتها)
• 'interactive/default' ↔ 'bg/base' ≥ 4. 5:1 (لینک/دکمه)
• «interactive/disabled» نباید حالتهای فعال را تقلید کند ؛ استفاده از کاهش کنتراست و ویژگی های مکان نما/ARIA.

• نور پایه تم (L)، سپس انحرافات 'Δ L' برای لایه ها/سطوح ('bg/ظریف'، 'bg/بالا')،
• ثابت حداقل جفت کنتراست در آزمون.

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 (منطقه قرمز-سبز): اجتناب از ترکیب «قرمز در مقابل سبز» بدون علائم اضافی.
• Tritanopia: جفت آبی و زرد به طور جداگانه بررسی می شود.
• اشکال و نمودارها را روشن کنید: برچسب های متن، انواع مختلف سکته مغزی/نشانگر، الگوهای پر کردن، زیرنویس های بخش.

9) تایپوگرافی و پس زمینه

اندازه بدن: 14-16 پیکسل حداقل (وب)، 16-18 پیکسل برای مناطق محتوا.
فاصله خط 1. 4–1. 6 خوانایی را در برابر پس زمینه کنتراست بالا بهبود می بخشد.
اجتناب از سبک های ظریف در کنتراست ناکافی.
متن در پس زمینه های رنگی: کاهش اشباع پس زمینه و/یا افزایش روشنایی برای رسیدن به نسبت هدف.

10) نمودارها، جداول، نمودارها

خطوط/ستون ها ≥ 3:1 به شبکه/پس زمینه.
برچسب ها و افسانه ها ≥ 4. 5:1.
از اشکال/الگوهای قابل تشخیص فراتر از رنگ استفاده کنید.

11) کنتراست پویا/تطبیقی

کنتراست خودکار: رنگ کنتراست متن را به پر کردن انتخاب شده محاسبه کنید (به عنوان مثال از طریق OKLCH: مطابقت «L» برای رسیدن به 4. 5:1).
تنظیمات سیستم: احترام «ترجیح می دهد کنتراست»، «اجباری رنگ»، حالت های سیستم عامل با کنتراست بالا.
شخصی سازی: تنظیم «کنتراست بالا» در برنامه (تقویت «Δ L»، جایگزینی لهجه های نام تجاری با موارد خنثی تر در حالی که حفظ هویت نام تجاری از طریق فرم/آیکون).

12) فرآیندهای کنترل و اتوماسیون

12. 1 برای طراحان

کنتراست را در پوسته ها (در هر دو موضوع و در زمینه های کلیدی) بررسی کنید.
«اسلات کنتراست» را در اجزای (عنوان/اولیه/ثانویه/اشاره) وارد کنید.
زمینه های پس زمینه معتبر برای هر جزء را مستند کنید.

12. 2 برای توسعه دهندگان

کمک کننده های واحد: عملکرد محاسبه کنتراست و ادعا در آزمون برای جفت نشانه.
عکس های فوری بصری با بررسی معیارهای کنتراست (رندر صفحه + محاسبه L1/L2 نمونه).
Linters سبک: ممنوعیت رنگ «خام»، تنها از طریق نشانه.

12. 3 V CV/CD

تمام جفت های «fg/bg» را در تم ها و ایالت ها بررسی می کند.
گزارش تخلف با جزء، نوع، موضوع و ارزش واقعی (به عنوان مثال،. 3. 9:1 با مورد نیاز 4. 5:1).

13) مشخصات iGaming (اختیاری)

آگهی های تبلیغاتی روشن و کارت های مسابقات اغلب متن را می خورند. صفحه/پوشش و محدودیت اشباع پس زمینه مورد نیاز است.
عناصر سیستم اطلاعیه های بحرانی (18 +، محدودیت ها، خطرات) - AAA در مقابل.
در مدیران/ضرایب: اعداد و علائم «+/-» ≥ 4. 5:1، برجسته کردن پیروزی - نه تنها در رنگ (آیکون ها/برچسب ها).

14) ضد گلوله

فقط به رنگ تکیه کنید تا شرایط را تشخیص دهید.
فونت های خاکستری نازک در یک پس زمینه رنگی بدون محاسبه کنتراست.
«تاریک در تاریکی» در حالت تاریک، «روشن در روشن» در مناطق تبلیغی.
متن در پس زمینه با جزئیات/سر و صدا بدون مرگ.

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» برای اجزای کلیدی، قوانین برای زمینه های رسانه ای و نحوه فعال کردن حالت کنتراست بالا.
صفحه Exceptions and Causes را زنده نگه دارید (برای مثال 3. 8:1 در مورد باریک یک هدر صفحه نمایش بزرگ).

خلاصه ای کوتاه

کنتراست یک پارامتر اندازه گیری است، نه یک پارامتر طعم. اهداف (AA/AAA) را تعیین کنید، آنها را از طریق نشانه ها (ترجیحا در OKLCH) مدیریت کنید، به طور خودکار در CI و بصری در طرح بندی ها بررسی کنید، تم های تاریک/نور و افراد مبتلا به اختلالات دید رنگ را در نظر بگیرید. این قابلیت خواندن را تضمین می کند، خطاها را کاهش می دهد و تبدیل را افزایش می دهد.