| کانال طراحی و رابط‌کاربری |
وقتی رنگ متن و پس‌زمینه به‌خوبی از هم جدا نباشند، حتی یک طراحی شیک هم شلخته و خسته‌کننده دیده می‌شود. کنتراست درست، هم ظاهر رو بهتر می‌کند هم تجربه کاربری رو؛ مخصوصاً روی موبایل و زیر نور زیاد ☀️
ایده اصلی 🧠
برای متن‌های اصلی (Body) و متن‌های کوچک، بهتره نسبت کنتراست بین رنگ متن و پس‌زمینه طبق WCAG حداقل این‌ها باشد:
• متن نرمال: نسبت کنتراست حداقل 4.5:1
• متن بزرگ (حداقل 18pt یا Bold 14pt): حداقل 3:1
ترفند عملی در Design Tool 🧰
در Figma یا ابزارهای مشابه، قبل از نهایی کردن رنگ‌ها، سریع آن‌ها را با یک اسکریپت ساده تست کنتراست کن. حتی اگر برنامه‌نویس نباشی، این منطق کمک می‌کند ترکیب‌های «خطرناک» را بشناسی.
نمونه در Python برای محاسبه کنتراست بین دو رنگ Hex:
def luminance(r, g, b):
c = [v / 255 for v in (r, g, b)]
adj = [v / 12.92 if v <= 0.03928 else ((v + 0.055) / 1.055) ** 2.4 for v in c]
return 0.2126 * adj[0] + 0.7152 * adj[1] + 0.0722 * adj[2]
def contrast_ratio(c1, c2):
L1 = luminance(*c1)
L2 = luminance(*c2)
L1, L2 = max(L1, L2), min(L1, L2)
return (L1 + 0.05) / (L2 + 0.05)
چند نکته UI/UX ✅
• خاکستری‌های خیلی روشن روی پس‌زمینه سفید، معمولاً برای متن ریز شکست می‌خورند.
• برای حالت Disabled، بهتر است کنتراست را ضعیف‌تر کنی اما نه آن‌قدر که کاملاً ناخوانا شود.
• روی لایت و دارک تم جداگانه کنتراست را چک کن؛ یک رنگ ممکن است در Light عالی باشد ولی در Dark افتضاح.
در پروژه بعدی، قبل از تحویل، فقط ۵ دقیقه برای چک کنتراست بگذار؛ تأثیرش روی حس حرفه‌ای بودن طراحی خیلی زیاد است ✨
مرجع پیشنهادی (طبق WCAG 2.1):
Contrast Minimum – W3C
🔖 #Design #طراحی #UI #UX #UI #UX #Color #Contrast #Accessibility #Design
👤 Developix
💎 Channel: @DevelopixDesign
7 · 1.3K ·