رنگ

رنگ دسترس‌پذیر

برای نشان دادن وجود مؤلفه میانای کاربر یا وضعیت آن، فقط از رنگ استفاده نکنید: از نمادنگاری و/یا شکل برای کمک به تمایز استفاده کنید. موفقیت/خطاها را فقط با رنگ نشان ندهید. از نماد یا نوشتار استفاده کنید.

<!-- Good: Denotes state without colors alone -->
<div class="error-msg">
  <span aria-hidden="true">❌</span>
  <span>The password entered was invalid.</span>
</div>

تضاد

• استانداردهای حداقل کنتراست: نسبت ۴٫۵:۱ را برای نوشتار معمولی و ۳:۱ را برای نوشتار یا نمادهای بزرگ حفظ کنید.
• رعایت استانداردهای کنتراست غیرنوشتاری: حداقل نسبت کنتراست ۳:۱ را برای مرزها و وضعیت‌های مؤلفه میانای کاربر حفظ کنید.
  • این شامل عناصر دیداری (حاشیه‌ها، پس‌زمینه‌ها، سایه‌های جعبه، خطوط زیرین) است که مرز را تشکیل می‌دهند یا وجود مؤلفه واسط کاربر را نشان می‌دهند (برای مثال، حاشیه‌های فیلد ورودی).
  • این شامل عناصر بصری نیز می‌شود که حالت‌های فعال را در یک مؤلفه نشان می‌دهند (برای مثال، علامت‌های تیک چارگوش انتخاب یا دکمه‌های کلید).
  • هشدار: رعایت کنتراست غیرنوشتاری ۳:۱ می‌تواند طراحی‌های مینیمالیستی را با چالش مواجه کند. گرادیان‌های ملایم یا سایه‌های داخلی/خارجی ظریف می‌توانند مرزهای بصری را نرم‌تر کنند و درعین‌حال الزامات دسترس‌پذیری را برآورده سازند.
• فقط درصورت لزوم از prefers-contrast استفاده کنید: زمانی‌که طراحی از رنگ‌های تأکیدی با کنتراست پایین استفاده می‌کند (مثلاً حاشیه‌های ظریف، نوشتار ثانویه بی‌صدا) که نیاز به تقویت دارند، از @media (prefers-contrast: more) استفاده کنید؛ اکثر سایت‌هایی که درحال‌حاضر کنتراست پایه را برآورده می‌کنند به آن نیاز نخواهند داشت.

آرایش رنگ‌های روشن و تیره

• پشتیبانی از طرح‌های رنگی روشن و تیره: از @media (prefers-color-scheme: dark) استفاده کنید و آن را با ویژگی CSS color-scheme جفت کنید تا کنترل‌های فرم، نوارهای پیمایش، و سایر سطوح ارائه‌شده توسط UA مطابقت داشته باشند. برای جزئیات بیشتر، به حالت تاریک مراجعه کنید.

حالت رنگ‌های اجباری

• پشتیبانی از «حالت رنگ‌های اجباری»: در «حالت رنگ‌های اجباری» (کنتراست بالا در Windows)، مرورگر رنگ‌های نویسنده را با کلیدواژه‌های سیستم لغو می‌کند و background-image، box-shadow، و border-image را حذف می‌کند. بااستفاده از @media (forced-colors: active)، رنگ‌های جایگزین سیستم را برای نشان‌های رنگی تعریف کنید.
• از forced-color-adjust: none فقط در جایی استفاده کنید که رنگ اطلاعات ضروری باشد (برجسته‌ساز نحو، نمونه انتخابگر رنگ). از forced-color-adjust: none فقط برای حفظ زیبایی‌شناسی استفاده نکنید.
• برای انتقال حاشیه‌ها، جداکننده‌ها، یا وضعیت، به background-image، box-shadow، یا border-image تکیه نکنید: این موارد در رنگ‌های اجباری (و اغلب در چاپ نیز) ناپدید می‌شوند. اگر مجبورید، مطمئن شوید که جایگزینی در حالت رنگ‌های اجباری وجود دارد، مانند outline یا border با کلیدواژه‌های رنگ سیستم (CanvasText، LinkText، ButtonText، Highlight، GrayText، و غیره).

درحال تولید رنگ‌ها

قبل‌از تولید پویای سایه‌رنگ‌ها، بررسی کنید که آیا می‌توانید از یک نشانه طراحی ازپیش تعریف‌شده موجود استفاده کنید یا نه. این کار به طراح کنترل بسیار بیشتری می‌دهد و ثبات را تضمین می‌کند.

اگر لازم است رنگ‌های روشن‌تر یا تیره‌تر را به‌طور پویا تولید کنید:

• فقط کانال روشنایی را در oklch/oklab یا lch/lab، مثلاً oklab(from var(--primary) 0.9 a b)، تنظیم نکنید. اگرچه این روش از نظر تئوری درست است، اما مرورگرها هنوز نگاشت گاموت را پیاده‌سازی نمی‌کنند، بنابراین رنگ حاصل غیرقابل پیش‌بینی است.
• می‌توانید از color-mix() برای ترکیب با سفید یا سیاه (ترجیحاً در oklab) استفاده کنید. این کار رنگ را به‌طور ایمن در گاموت نگه می‌دارد، اما معمولاً رنگ‌ها را بیش‌ازحد غیراشباع می‌کند و ته‌رنگ‌ها و سایه‌های رنگ‌باخته ایجاد می‌کند.
• می‌توانید تنظیم روشنایی را با هریک از روش‌های دیگر (مثلاً color-mix(in oklab, oklch(from var(--primary) 0.9 c h), white 30%)) ترکیب کنید تا بین این دو تعادل برقرار شود، اما از افزایش بیش‌از ۳۰٪ برای تنظیم روشنایی خودداری کنید.