| کانال طراحی و رابط‌کاربری |
🎨 یک ترفند سریع برای کنتراست رنگ و خوانایی بهتر
تو UI قشنگ‌ترین پالت رنگ هم اگر کنتراست خوبی نداشته باشه، متن‌هات عملاً "نامرئی" می‌شن 😅 مخصوصاً روی موبایل و زیر نور.
✅ قانون ساده:
برای متن‌های اصلی، نسبت کنتراست حداقل 4.5:1 با پس‌زمینه رو رعایت کن (طبق WCAG). این یعنی مثلاً:
• متن خاکستری روشن روی پس‌زمینه سفید ❌
• متن تقریباً مشکی روی پس‌زمینه سفید ✅
یه مثال رنگ:
• Background: #FFFFFF
• Text ضعیف: #BDBDBD (کنتراست کم)
• Text درست: #212121 (کنتراست مناسب)
مثلاً در CSS این‌جوری فرق می‌کنه:
/* خوانایی ضعیف */
body {
background-color: #ffffff;
color: #bdbdbd;
}
/* خوانایی بهتر و استانداردتر */
body {
background-color: #ffffff;
color: #212121;
}
✨ نکته کاربردی: توی Figma حتماً از افزونه‌های چک کنتراست (مثل Contrast) استفاده کن؛ هرجا متن روی تصویر، گرادینت یا کارت رنگی گذاشتی، سریع کنتراست رو تست کن.
برای جزییات بیشتر استاندارد کنتراست:
W3C WCAG – Contrast (Minimum)
👀 دفعه بعد که UI تحویل می‌دی، قبل از هر چیز کنتراست رو چک کن؛ تاثیرش روی تجربه کاربر واقعاً چشم‌گیره.
🔖 #Design #طراحی #UI #UX #UI #UX #Contrast #Color #Accessibility #Typography #WCAG
👤 Developix
💎 Channel: @DevelopixDesign
3 · 1.2K ·