رنگ پسزمینه حالت روشن: چرا #FFFFFF کافی نیست و ۸ رنگی که باید استفاده کنید
صفحه‌ای که کاملاً سفید باشد جایی برای نشان دادن عمق ندارد. رنگ پسزمینه حالت روشن که باید جایگزین شود (`#F2F2F7` پشت کارتهای سفید)، رنگهای متن نرم‌تر، رنگ تأکید عمیقتر و ۸ کدی که باید به توسعه‌دهنده بدهید.
بهترین رنگ پسزمینه حالت روشن #FFFFFF نیست. صفحه را روی یک خاکستری ملایم مثل #F2F2F7 بگذارید و سفید را برای کارت‌هایی نگه دارید که روی آن قرار می‌گیرند، تا سطوح چیزی داشته باشند که از آن بالا بیایند. در ادامه می‌خوانید چرا صفحه تماماً سفید شکست می‌خورد، سه راه‌حل، و هشت رنگی که باید به توسعه‌دهنده بدهید.
چرا صفحه تماماً سفید تخت میشود
بیشتر طراح‌ها حالت روشن را با سفید کردن همه‌چیز شروع می‌کنند. سفید رنگ پیش‌فرض هر ابزار طراحی و پسزمینه پیش‌فرض هر مرورگر است، پس خنثی به نظر می‌رسد. خنثی نیست. این تنها انتخابی است که توانایی شما در نشان دادن عمق را از بین می‌برد.
یک کارت باید با صفحه‌ای که روی آن نشسته فرق داشته باشد. وقتی هر دو #FFFFFF باشند، تنها راه جدا کردنشان حاشیه یا سایه است و این دو جزئیات کل بار را به دوش می‌کشند. چند کارت دیگر اضافه کنید و صفحه به شبکه‌ای از خط‌های دور تبدیل میشود.
حالت تیره این مشکل را قبلاً حل کرده است. آنجا سطح روشنتر یعنی سطح بالاتر، پس هر لایه یک پله روشنتر از لایه زیرین است. مقاله ما درباره سیستم‌های رنگی حالت تیره این پلکان را توضیح میدهد و طراحی حالت تیره بقیه پالت را پوشش میدهد. حالت روشن پلهای روشنتر از سفید ندارد، پس به حرکت دیگری نیاز دارد: کف را پایین بیاورید.
راه‌حل ۱: صفحه را از #F2F2F7 شروع کنید
صفحه و کارت‌ها هر دو #FFFFFF
صفحه #F2F2F7، کارت‌ها #FFFFFF
#F2F2F7 همان خاکستریای است که iOS پشت لیستهای گروه‌بندی‌شده‌اش می‌گذارد. این رنگ system gray 6 اپل در حالت روشن است و راهنمای خود اپل هم این است که برای جدولهای گروهبندیشده از رنگهای پسزمینه گروهی استفاده شود. Settings مثال کلاسیک است: صفحه‌ای خاکستری کمرنگ با ردیف‌های سفید.
همین یک تغییر یک کف و یک سقف به شما میدهد. صفحه کف است، کارت‌ها و شیت‌ها سقف‌اند و فاصله بینشان بدون کشیدن حتی یک خط دیده میشود.
کجا اعمالش کنید:
- پسزمینه صفحه، پشت هر صفحه‌ای که کارت، لیست یا بخش دارد.
- لیستهای گروهی و صفحههای تنظیمات، جایی که ردیف‌ها سفیدند و فاصله‌ها خاکستری.
- ورودی‌های داخل کارت سفید، که می‌توانند به رنگ خاکستری صفحه باشند تا فرورفته به نظر برسند.
اگر صفحه شما یک مقاله بلند سفید بدون هیچ کارتی است، سفید اشکالی ندارد. این قاعده برای رابط‌هایی است که از سطوح ساخته شده‌اند.
راه‌حل ۲: بگذارید سایه‌ها بالا ببرند
در حالت تیره، ارتفاع یعنی رنگ روشنتر. در حالت روشن، سطوح سفید میمانند و به جایش سایه بزرگتر میشود. کارتی که ثابت است سایه کوچک و نرمی می‌گیرد؛ منو یا دیالوگی که بالای آن شناور است سایه‌ای بزرگتر و نرم‌تر.
دو عادت این را درست نشان می‌دهند:
- سایه را با رنگ متن‌تان تیره کنید، نه با سیاه خالص. سایه‌ای به رنگ متن شما (پست از
#1B1530استفاده کرد، یک بنفش تیره) جزئی از رابط به نظر می‌رسد. سیاه خالص شبیه لکه است. - بزرگتر را یعنی بالاتر کنید. از مقیاس کوتاهی با چهار سطح، کوچک تا بزرگ، استفاده کنید و هر سطح را به یک کار نگاشت کنید: کارت، کارت برجسته، منو، دیالوگ. و هرگز سطح پنجمی اختراع نکنید.
/* A starting point, not a platform spec. Tune the values to your brand. */
:root {
--shadow-ink: 27 21 48; /* #1B1530 */
--shadow-sm: 0 1px 2px rgb(var(--shadow-ink) / 0.08);
--shadow-md: 0 4px 12px rgb(var(--shadow-ink) / 0.10);
--shadow-lg: 0 12px 32px rgb(var(--shadow-ink) / 0.14);
}
.card { background: #FFFFFF; box-shadow: var(--shadow-sm); }
.menu { background: #FFFFFF; box-shadow: var(--shadow-md); }
.dialog { background: #FFFFFF; box-shadow: var(--shadow-lg); }
صفحه خاکستری است که این را ممکن میکند. روی صفحه سفید یک سایه نرم تقریباً نامرئی است، پس مردم با سایه تیره‌تر یا حاشیه جبران می‌کنند. روی #F2F2F7 یک سایه سبک کافی است.
راه‌حل ۳: سیاه را نرم کنید، بعد رنگ تأکید را عمیقتر
متن #000000 خالص روی صفحه سفید یا نزدیک به سفید خشن‌تر از حد لازم است و باعث میشود هر رنگ دیگری کنارش ضعیف به نظر برسد. Material 3 رنگ متن روشنش را یک پله نرم‌تر تنظیم کرده است.
متن
متن ثانویه
غیرفعال، ۳۸ درصد
#1D1B20برای متن. این رنگ on-surface در Material 3 است. تقریباً سیاه با اندکی بنفش است و هم روی سفید و هم روی خاکستری خوب می‌نشیند.#49454Fبرای متن ثانویه مثل کپشن‌ها، خط‌های راهنما و زمان‌ها. هنوز به راحتی خوانده میشود و به‌وضوح آرام‌تر از متن اصلی است.- همان جوهر با ۳۸ درصد برای برچسب‌ها و آیکون‌های غیرفعال. روی سفید به
#A9A8AAمی‌رسد و Material دقیقاً از همین شفافیت استفاده میکند. متن غیرفعال تنها جایی است که کنتراست پایین عین هدف است و WCAG آن را معاف کرده است.
رنگ تأکید به اصلاح برعکس نیاز دارد. رنگ برند روشن و پرنوری که روی صفحه تیره عالی بود روی سفید ناپدید میشود.
تأکید روشن روی سفید
تأکید عمیق روی سفید
#BB86FC بنفش پایه Material برای تم‌های تیره است. روی سفید تقریباً محو میشود، که برای هر چیزی که باید مثل دکمه یا لینک خوانده شود مشکل است.
#6200EE بنفش پایه Material برای تم‌های روشن است، از همان خانواده و به اندازه کافی عمیق تا خودش را نگه دارد. وقتی تم روشن می‌سازید، رنگ تأکید تم تیره را دوباره استفاده نکنید. پله عمیقتر همان فام را انتخاب کنید.
۸ رنگ حالت روشن
روی هر چیپ بزنید تا کدش کپی شود.
| نقش | مقدار | برای چه استفاده شود |
|---|---|---|
| پایه | #F2F2F7 | صفحه، پشت کارت‌ها و لیستهای گروهی |
| کارت‌ها | #FFFFFF | کارت‌ها، شیت‌ها، منوها، ردیف‌ها |
| جداکننده‌ها | #E5E5EA | خط‌های بین ردیف‌ها. نه برای حاشیه ورودی‌ها |
| متن | #1D1B20 | عنوان‌ها و متن اصلی |
| ثانویه | #49454F | کپشن‌ها، متن راهنما، زمان‌ها |
| غیرفعال | #A9A8AA | برچسب‌ها و آیکون‌های غیرفعال (متن با ۳۸ درصد) |
| اصلی | #6200EE | دکمه‌ها، لینک‌ها، حالت‌های انتخاب‌شده |
| خطا | #B00020 | متن، حاشیه و آیکون خطا |
#E5E5EA همان system gray 5 در iOS است و برای جداکننده‌ها کار میکند چون جداکننده فقط باید دیده شود، نه خوانده. حاشیه فیلد به بیشتر از این نیاز دارد. مقاله ما درباره placeholder و برچسب رنگ حاشیه‌ای را که باید به جایش استفاده کنید میدهد.
این را به توسعه‌دهنده بدهید
همان هشت رنگ به شکل CSS custom property:
:root {
--color-base: #F2F2F7;
--color-card: #FFFFFF;
--color-divider: #E5E5EA;
--color-text: #1D1B20;
--color-text-secondary: #49454F;
--color-text-disabled: #A9A8AA;
--color-primary: #6200EE;
--color-error: #B00020;
}
body { background: var(--color-base); color: var(--color-text); }
.card { background: var(--color-card); }
.caption { color: var(--color-text-secondary); }
.card + .card { margin-top: 12px; }
hr { border: 0; border-top: 1px solid var(--color-divider); }
اگر تم تیره هم ارائه میدهید، به هر یک از این نام‌ها مقدار دومی زیر @media (prefers-color-scheme: dark) بدهید، مثل نقشه توکن‌های حالت تیره. نام‌ها ثابت میمانند و فقط مقدارها عوض میشوند، و همین جلوی تبدیل شدن حالت روشن به «حالت تیره، وارونه» را می‌گیرد.
اعداد پشت «به راحتی دیده میشود»
پست می‌گوید «به راحتی دیده میشود» و «سخت دیده میشود». برای کسی که در جلسه بازبینی از این انتخاب دفاع میکند، این هم اعداد (نسبت‌های کنتراست WCAG 2، محاسبه‌شده روی سفید):
| جفت | کنتراست | نتیجه |
|---|---|---|
متن #1D1B20 روی #FFFFFF | ۱۷.۱ به ۱ | بسیار بالاتر از حداقل ۴.۵ به ۱ |
متن #49454F روی #FFFFFF | ۹.۳ به ۱ | راحت برای متن ثانویه |
غیرفعال #A9A8AA روی #FFFFFF | ۲.۴ به ۱ | معاف، غیرفعال قرار است آرام باشد |
#BB86FC روی #FFFFFF | ۲.۶۵ به ۱ | زیر ۳ به ۱ مورد نیاز شکل دکمه |
#6200EE روی #FFFFFF | ۷.۶۳ به ۱ | به راحتی دیده میشود |
یک واقعیت دیگر که ارزش دانستن دارد: سطح روشن خود Material 3 هم #FFFFFF نیست. #FEF7FF است، سفیدی با رنگ‌مایه‌ای بسیار کم. حتی سیستم طراحی‌ای که بیشتر تیم‌ها آن را پیش‌فرض می‌دانند صفحه را سفید خالص نمی‌کند.
سوالات متداول
بهترین رنگ پسزمینه برای حالت روشن چیست؟
یک خاکستری روشن ملایم مثل #F2F2F7 برای صفحه، با #FFFFFF برای کارتهای روی آن. خاکستری به سطوح سفید چیزی میدهد که از آن متمایز شوند، پس به حاشیه و سایه کمتری نیاز دارید.
آیا #FFFFFF رنگ پسزمینه بدی است؟
نه همیشه، اما صفحه تماماً سفید راهی برای نشان دادن عمق ندارد. کارت‌ها در صفحه حل میشوند و حاشیه‌ها و سایه‌ها کل کار را انجام می‌دهند. سفید بهتر است رنگ سطوح باشد، نه کل صفحه.
#F2F2F7 چیست؟
system gray 6 در iOS برای حالت روشن است، خاکستریای که اپل پشت لیستهای گروهبندیشده مثل اپ Settings استفاده میکند. اپل رنگهای پسزمینه گروهی را برای جدولهای گروهبندیشده توصیه میکند.
روی پسزمینه سفید از چه رنگ متنی استفاده کنم؟
یک تقریباً-سیاه نرم مثل #1D1B20 برای متن و #49454F برای متن ثانویه. هر دو رنگ Material 3 هستند و هم روی سفید و هم روی #F2F2F7 به راحتی خوانده میشوند.
در حالت روشن ارتفاع را چطور نشان میدهید؟
با سایه. در حالت تیره سطح روشنتر یعنی سطح بالاتر، اما حالت روشن پلهای روشنتر از سفید ندارد، پس سطوح سفید میمانند و سایه با ارتفاع بزرگتر میشود.
آیا رنگ تأکید باید بین حالت روشن و تیره عوض شود؟
بله. رنگ تأکید روشنی مثل #BB86FC روی صفحههای تیره کار میکند اما روی سفید تقریباً ناپدید میشود. روی سطوح روشن از پله عمیقتر همان فام، مثل #6200EE، استفاده کنید.
منابع
- Apple Human Interface Guidelines، Color:
#F2F2F7در حالت روشن systemGray6 است (R242 G242 B247) و رنگهای پسزمینه گروهی برای جدولهای گروهبندیشده در نظر گرفته شده‌اند. - نقش‌های رنگی Material 3، خوانده‌شده از ColorLightTokens و PaletteTokens در androidx Compose: on surface
#1D1B20(Neutral10)، on surface variant#49454F(NeutralVariant30)، surface روشن#FEF7FF. نقش‌های رنگی Material را ببینید. - شفافیت ۰.۳۸ برای برچسب و آیکون غیرفعال از توکن‌های کامپوننت Material 3.
#1D1B20با ۳۸ درصد روی#FFFFFFبرابر#A9A8AAاست. #BB86FCو#6200EEرنگهای اصلی پایه Material برای تیره و روشن‌اند.#B00020رنگ خطای پایه روشن Material است.#E5E5EAهمان system gray 5 در iOS برای حالت روشن است.- WCAG 2.2، 1.4.3 Contrast (Minimum) و 1.4.11 Non-text Contrast. نسبت‌ها با فرمول luminance نسبی WCAG محاسبه شده‌اند. متن غیرفعال از حداقل معاف است.
- رنگ سایه
#1B1530و چهار سطح سایه توصیه خودمان است، نه مقدار یک پلتفرم. - نخستین بار به شکل کاروسل در UX Brainy منتشر شد.
Want a light and a dark theme designed as one system, not a theme and its inversion? Our team builds product UI and design systems that hold up in both.
Get Started
