| کانال طراحی و رابط‌کاربری |
در طراحی UI خیلی وقت‌ها مشکل اصلی «بد بودن فونت» نیست، «کم بودن کنتراست» بین متن و پس‌زمینه‌ست. کاربر روی موبایل، زیر نور، با خستگی چشم نگاه می‌کند؛ اگر کنتراست درست نباشد، حتی بهترین تایپوگرافی هم شکست می‌خورد. 🔍
🎯 نکتهٔ عملی
برای متن‌های اصلی (Body Text)، سعی کن نسبت کنتراست حداقل مطابق WCAG زیر باشد:
• متن معمولی (small text): حداقل 4.5:1
• متن بزرگ (حداقل 18pt یا bold 14pt): حداقل 3:1
این استاندارد توی خیلی از Design Systemها مثل Material Design رعایت می‌شود و روی خستگی چشم و فهم سریع محتوا تاثیر مستقیم دارد. 👀
🧪 مثال ساده (Pseudo Code رنگ)
// رنگ پس‌زمینه روشن
bgColor = #FFFFFF
// رنگ متن خاکستری کمرنگ (کنتراست بد)
textColorBad = #BDBDBD // تقریبی: 2.5:1 ❌
// رنگ متن خاکستری تیره (کنتراست خوب)
textColorGood = #424242 // تقریبی: 7:1 ✅
تفاوت ظاهری ممکنه خیلی کم به‌نظر برسد، اما روی صفحه موبایل، مخصوصاً در نور کم یا زیاد، خوانایی textColorGood خیلی بهتر است.
📌 چند نکتهٔ سریع در UI
• برای متن روی پس‌زمینه رنگی (مثلاً دکمه‌ها)، همیشه کنتراست را چک کن، مخصوصاً روی حالت Disabled.
• روی پس‌زمینه‌های عکس‌دار (Hero، Banner)، یا از لایه مشکی/سفید با شفافیت استفاده کن، یا متن را داخل Surface جداگانه بگذار.
• برای Secondary Text و Caption هم حداقل 4.5:1 را حفظ کن؛ خاکستری خیلی روشن معمولاً فقط روی پس‌زمینه کاملاً تیره جواب می‌دهد.
ابزارهای آنلاین مثل Contrast Checker کمک می‌کنند تصمیم‌های رنگی کاملاً آگاهانه و مطابق استاندارد بگیری. دفعه بعد که UI می‌سازی، فقط با یک اصلاح کوچک در کنتراست، می‌شود حس «طراحی حرفه‌ای» به محصول اضافه کرد. ✨
🔗 مرجع:
WCAG 2.1 – Contrast (Minimum)
🔖 #Design #طراحی #UI #UX #UI #UX #color #contrast #accessibility #WCAG #design_system
👤 Developix
💎 Channel: @DevelopixDesign
8 · 1.5K ·