| کانال طراحی و رابط‌کاربری |
متن روی تصویر یا گرادیان وقتی کنتراست کافی نداشته باشه، حتی اگر فونت خوب باشه، تجربه کاربر رو خراب می‌کنه. مخصوصاً توی UI موبایل که کاربر زیر نور شدید صفحه رو می‌بینه. اینجا یک تریک ساده و عملی برای خواناتر کردن متن روی پس‌زمینه‌های شلوغ 👇
۱️⃣ از لایه Overlay تیره/روشن استفاده کن
روی تصویر یا گرادیان، یک لایه نیمه‌شفاف بذار تا اختلاف روشنایی بین متن و پس‌زمینه بیشتر بشه:
- متن روشن ✔️ → Overlay تیره روی پس‌زمینه
- متن تیره ✔️ → Overlay روشن روی پس‌زمینه
مثلاً در Figma:
- یک Rectangle روی تصویر بکش
- رنگش رو مشکی بذار با Opacity حدود ۴۰٪
- متن سفید رو روی اون قرار بده
۲️⃣ اعداد عملی برای شروع
برای UI واقعی، این تنظیم‌ها معمولاً جواب می‌ده:
- Background Overlay مشکی: #000000 با ۳۲٪ تا ۴۸٪ Opacity
- متن: #FFFFFF با وزن حداقل Medium
این ترکیب توی اکثر موارد به نسبت کنتراست نزدیک به استانداردهای WCAG می‌رسه و روی موبایل هم خواناست.
۳️⃣ اگر پس‌زمینه خیلی رنگی است
به‌جای خالص مشکی یا سفید، می‌شه از همون رنگ اصلی با Saturation کمتر و Lightness مناسب استفاده کرد؛ هم هارمونی حفظ می‌شه، هم متن واضح می‌مونه.
نمونه pseudo-code برای طراحی سبک
cardBackground: image
cardOverlay: rgba(0, 0, 0, 0.4)
cardTextColor: #FFFFFF
cardTextWeight: 500
۴️⃣ حتماً کنتراست رو چک کن
بعد از تنظیم Overlay، کد رنگ متن و پس‌زمینه نهایی رو توی یک Contrast Checker تست کن. حداقل هدف برای متن معمولی، نسبت ۴٫۵:۱ هست.
رفرنس کاربردی 📚
Nielsen Norman Group - Contrast and Color Use in UI:
لینک مقاله
امتحان این تریک توی یک یا دو اسکرین از طراحی فعلیت، معمولاً بلافاصله فرق خوانایی و حس حرفه‌ای بودن UI رو نشون می‌ده. 😉
🔖 #Design #طراحی #UI #UX #UI #UX #Contrast #Color #Accessibility #Mobile_Design
👤 Developix
💎 Channel: @DevelopixDesign
4 · 1.6K ·